Javascript文件链接无法正常工作
Javascript file links not working properly
我有四个不同的文件链接在一起。索引.html - 样式.css - 脚本.js - 脚本2.js
script2.js包含一个小的测试脚本来测试并查看它是否一切正常,它确实如此。
索引.html 包含以下内容:
<DOCTYPE html>
<html>
<body>
<head>
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="container">
<div id="message">
<a id="animate" href="#">Transmit</a>
</div>
</div>
</body>
<html>
现在我的脚本.js文件包含以下内容:
(function () {
var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;
MESSAGES = [];
MESSAGES.push({
delay: 0,
text: 'Incoming transmission...'
});
MESSAGES.push({
delay: 1200,
text: 'You don''t talk to anybody.'
});
MESSAGES.push({
delay: 2200,
text: 'You don''t interact with anybody.'
});
MESSAGES.push({
delay: 3600,
text: 'Your whole sense of reality is, pretty warped...'
});
MESSAGES.push({
delay: 5200,
text: 'Does it bother you that we''re not real?'
});
$container = $('#container');
$message = $('#message');
$animate = $('#animate');
$paragraph = null;
scramble = function (element, text, options) {
var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, j, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
defaults = {
probability: 0.2,
glitches: '-|/''',
blank: '',
duration: text.length * 40,
ease: 'easeInOutQuad',
delay: 0
};
$element = $(element);
settings = $.extend(defaults, options);
shuffle = function () {
if (Math.random() < 0.5) {
return 1;
} else {
return -1;
}
};
wrap = function (text, classes) {
return '<span class="' + classes + '">' + text + '</span>';
};
glitchText = settings.glitches;
glitchCharacters = glitchText.split('');
glitchLength = glitchCharacters.length;
glitchProbability = settings.probability;
glitches = function () {
var j, len, results;
results = [];
for (j = 0, len = glitchCharacters.length; j < len; j++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
letter = glitchCharacters[j];
results.push(wrap(letter, 'glitch'));
}
window.CP.exitedLoop(1);
return results;
}();
ghostText = $element.text();
ghostCharacters = ghostText.split('');
ghostLength = ghostCharacters.length;
ghosts = function () {
var j, len, results;
results = [];
for (j = 0, len = ghostCharacters.length; j < len; j++) {
if (window.CP.shouldStopExecution(2)) {
break;
}
letter = ghostCharacters[j];
results.push(wrap(letter, 'ghost'));
}
window.CP.exitedLoop(2);
return results;
}();
textCharacters = text.split('');
textLength = textCharacters.length;
order = function () {
results = [];
for (var j = 0; 0 <= textLength ? j < textLength : j > textLength; 0 <= textLength ? j++ : j--) {
if (window.CP.shouldStopExecution(3)) {
break;
}
results.push(j);
}
window.CP.exitedLoop(3);
return results;
}.apply(this).sort(this.shuffle);
output = [];
for (i = k = 0, ref = textLength; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
if (window.CP.shouldStopExecution(4)) {
break;
}
glitchIndex = Math.floor(Math.random() * (glitchLength - 1));
glitchCharacter = glitches[glitchIndex];
ghostCharacter = ghosts[i] || settings.blank;
addGlitch = Math.random() < glitchProbability;
character = addGlitch ? glitchCharacter : ghostCharacter;
output.push(character);
}
window.CP.exitedLoop(4);
object = { value: 0 };
target = { value: 1 };
parameters = {
duration: settings.duration,
ease: settings.ease,
step: function () {
var index, l, progress, ref1;
progress = Math.floor(object.value * (textLength - 1));
for (i = l = 0, ref1 = progress; 0 <= ref1 ? l <= ref1 : l >= ref1; i = 0 <= ref1 ? ++l : --l) {
if (window.CP.shouldStopExecution(5)) {
break;
}
index = order[i];
output[index] = textCharacters[index];
}
window.CP.exitedLoop(5);
return $element.html(output.join(''));
},
complete: function () {
return $element.html(text);
}
};
return $(object).delay(settings.delay).animate(target, parameters);
};
animate = function () {
var data, element, index, j, len, options;
for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
if (window.CP.shouldStopExecution(6)) {
break;
}
data = MESSAGES[index];
element = $paragraph.get(index);
element.innerText = '';
options = { delay: data.delay };
scramble(element, data.text, options);
}
window.CP.exitedLoop(6);
};
initialise = function () {
var index, j, len, text;
$animate.click(animate);
for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
if (window.CP.shouldStopExecution(7)) {
break;
}
text = MESSAGES[index];
$message.append('<p>');
}
window.CP.exitedLoop(7);
$paragraph = $container.find('p');
animate();
};
initialise();
}.call(this));
这行不通。为什么?我不明白为什么一个文件有效,而另一个文件却不起作用......
你的脚本.js不起作用,因为window.CP
未定义。 window.CP
是 CodePen 的一部分,可防止无限循环挂起您的标签或浏览器。
从 http://codepen.io/wagerfield/pen/wftcE 中获取原始咖啡脚本(不是编译的脚本),并使用 http://js2.coffee 将其转换为javascript,并将其用作脚本.js
这是转换后的javascript(使用它作为你的脚本.js):
var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;
MESSAGES = [];
MESSAGES.push({
delay: 0,
text: "Incoming transmission..."
});
MESSAGES.push({
delay: 1200,
text: "You don't talk to anybody."
});
MESSAGES.push({
delay: 2200,
text: "You don't interact with anybody."
});
MESSAGES.push({
delay: 3600,
text: "Your whole sense of reality is, pretty warped..."
});
MESSAGES.push({
delay: 5200,
text: "Does it bother you that we're not real?"
});
$container = $("#container");
$message = $("#message");
$animate = $("#animate");
$paragraph = null;
scramble = function(element, text, options) {
var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, j, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
defaults = {
probability: 0.2,
glitches: '-|/''',
blank: '',
duration: text.length * 40,
ease: 'easeInOutQuad',
delay: 0.0
};
$element = $(element);
settings = $.extend(defaults, options);
shuffle = function() {
if (Math.random() < 0.5) {
return 1;
} else {
return -1;
}
};
wrap = function(text, classes) {
return "<span class='"" + classes + "'">" + text + "</span>";
};
glitchText = settings.glitches;
glitchCharacters = glitchText.split('');
glitchLength = glitchCharacters.length;
glitchProbability = settings.probability;
glitches = (function() {
var j, len, results;
results = [];
for (j = 0, len = glitchCharacters.length; j < len; j++) {
letter = glitchCharacters[j];
results.push(wrap(letter, 'glitch'));
}
return results;
})();
ghostText = $element.text();
ghostCharacters = ghostText.split('');
ghostLength = ghostCharacters.length;
ghosts = (function() {
var j, len, results;
results = [];
for (j = 0, len = ghostCharacters.length; j < len; j++) {
letter = ghostCharacters[j];
results.push(wrap(letter, 'ghost'));
}
return results;
})();
textCharacters = text.split('');
textLength = textCharacters.length;
order = (function() {
results = [];
for (var j = 0; 0 <= textLength ? j < textLength : j > textLength; 0 <= textLength ? j++ : j--){ results.push(j); }
return results;
}).apply(this).sort(this.shuffle);
output = [];
for (i = k = 0, ref = textLength; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
glitchIndex = Math.floor(Math.random() * (glitchLength - 1));
glitchCharacter = glitches[glitchIndex];
ghostCharacter = ghosts[i] || settings.blank;
addGlitch = Math.random() < glitchProbability;
character = addGlitch ? glitchCharacter : ghostCharacter;
output.push(character);
}
object = {
value: 0
};
target = {
value: 1
};
parameters = {
duration: settings.duration,
ease: settings.ease,
step: function() {
var index, l, progress, ref1;
progress = Math.floor(object.value * (textLength - 1));
for (i = l = 0, ref1 = progress; 0 <= ref1 ? l <= ref1 : l >= ref1; i = 0 <= ref1 ? ++l : --l) {
index = order[i];
output[index] = textCharacters[index];
}
return $element.html(output.join(''));
},
complete: function() {
return $element.html(text);
}
};
return $(object).delay(settings.delay).animate(target, parameters);
};
animate = function() {
var data, element, index, j, len, options;
for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
data = MESSAGES[index];
element = $paragraph.get(index);
element.innerText = '';
options = {
delay: data.delay
};
scramble(element, data.text, options);
}
};
initialise = function() {
var index, j, len, text;
$animate.click(animate);
for (index = j = 0, len = MESSAGES.length; j < len; index = ++j) {
text = MESSAGES[index];
$message.append("<p>");
}
$paragraph = $container.find("p");
animate();
};
initialise();
// ---
// generated by coffee-script 1.9.2
朋友遇到了同样的问题,但他想使用窗口。因此,我检查了代码笔的javascript文件,并找到了它的来源。
您可以将以下内容保存到 js 文件中,然后将其导入到 javascript 脚本中。 窗口。CP 函数子集应该在那之后完全工作。
"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang'S+:('d+):'d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
确保文件路径正确。
在你的代码中,你包含你的javascript文件,如下所示:
<script type="text/javascript" src="script.js"></script>
因此,请确保您的文件索引.html和脚本.js位于同一文件夹中。
如果不是,请尝试包含您的 JavaScript 文件,如下所示:
<script type="text/javascript" src="../script.js"></script>
我希望这会有所帮助。
使用检查元素(F12)在浏览器中签出 ->网络或控制台,您将获得脚本的路径.js 。使用 ~ 设置路径。~ 将设置文件夹结构的根目录。
<script type="text/javascript" src="~/Set folder name from Root/script.js"></script>
如果您的文件放置在 Assets -> Script 文件夹中,那么您的路径将是"~/Assets/Script/script.js"
<script type="text/javascript" src="~/Assets/Script/script.js"></script>
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- 最大高度转换不;不工作,工作缓慢
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- JQuery - Ajax: encodeUriComponent不工作(EncodeUri工作)