放置在正文标签中的脚本不起作用答案

【问题标题】：Script does not work placed in body tags放置在正文标签中的脚本不起作用
【发布时间】：2014-05-04 07:11:18
【问题描述】：

名为 One.jpg 到 Ten.jpg 的图像位于我桌面上的文件夹“myFolder”中。下面是从 myFolder 中的总共十张图像中一次旋转三张图像的代码，并且 html 文件也在同一文件夹中。如何编写 src 以便此代码可以工作。警报消息给出了这 10 个图像的名称，但进一步它不起作用。放置在正文标签中的脚本不起作用。有什么问题需要纠正以加快结果。

<html>
<body>

<img  id = "im1"><img id = "im2"><img id = "im3">

<script type = "text/javascript">

var imgArray = ['One.jpg','Two.jpg','Three.jpg','Four.jpg','Five.jpg', 'Six.jpg', 'Seven.jpg', 'Eight.jpg', 'Nine.jpg', 'Ten.jpg'];

function randOrd(){return (Math.round(Math.random())-0.5)}
imgArray.sort(randOrd);
alert (imgArray);  // FOR TESTING
var len = imgArray.length;
var count = 0;

rotate1();
rotate2();
rotate3();

function rotate1() {
document.getElementById("im1").src= imgArray[count];
count++;
if (count>=len) {count = 0}
var tim1 = window.setTimeout("rotate1()", 3000);  // 3 seconds
}


function rotate2() {
document.getElementById("im2").src = imgArray[count];
count++;
if (count>=len) {count = 0}
var tim2 = window.setTimeout("rotate2()", 5000);  // 5 seconds
}


function rotate3() {
document.getElementById("im3").src = imgArray[count];
count++;
if (count>=len) {count = 0}
var tim3 = window.setTimeout("rotate3()", 7000);  // 7 seconds
}

</script>
</body>
</html>

【问题讨论】：

你能用完整的代码创建一个小提琴吗？
没有正文元素？没有脚本元素关闭？这看起来像一团糟。
您好 Dystroy，感谢您指出我的错误，实际上这是由于不正确的复制和粘贴到框中。我会改正的。
您在此处缺少分号：if (count>=len) {count = 0}。在下面更新了我的答案。
这对我来说在 Chrome 中运行良好。您看到的问题是什么？除了“它不起作用”之外，你没有太多关于它的说法。

标签： javascript html

【解决方案1】：

最佳实践是，脚本应该放在一个单独的文件中，然后包含在正文的结尾，如下所示：

<script src="scripts/YourScript.js"></script>

src 指向文件。

这很好，因为：

浏览器在从上到下解析页面时呈现页面。这意味着当它到达 body 标记末尾的 script 部分时，应该加载您的 HTML，因此脚本使用的元素很可能会出现。
您可以在加载最慢的部分（脚本）之前向用户显示一些内容。
您可以从 CDN 提供脚本，因此请求-响应延迟将最小化。

我所知道的这条规则的唯一例外是modernizr 或类似的浏览器和功能检测库。

更新

这里少了一个分号：

if (count>=len) {count = 0}

应该是这样的：

if (count>=len) {count = 0; }

此外，当您将函数传递给 setTimeout 时，您可以这样做：

window.setTimeout(rotate3, 7000);

【讨论】：

您好 Andrei，我已经按照您的建议进行了更正，但仍然没有成功。
你会检查这部分代码'function randOrd(){return (Math.round(Math.random())-0.5)}'
那段代码返回 +0.5 和 -0.5 所以排序应该很顺利。 does not work 到底是什么意思？您是否在控制台 (F12) 中收到任何错误或没有任何反应？您希望发生什么？

【解决方案2】：

理想情况下，您应该从外部文件加载脚本，而您的 HTML 文件中根本没有 JavaScript。然后，您将提供带有 CSP 标头的文档。

【讨论】：

【解决方案3】：

忽略“最佳”实践，您的问题是您没有关闭 </script> 标记。

【讨论】：

他说他有，只是复制粘贴而已。