Question

名为One.jpg到Ten.jpg的图片位于myFolder＆＃39;文件夹中，位于我的桌面上。下面是一个代码，用于从myFolder中的十个图像一次旋转三个图像，并且html文件也在同一个文件夹中。如何编写src以便此代码可以工作。警报消息给出了这10个图像的名称，但进一步说它不起作用。脚本不能放在body标签中。为加快结果而纠正的是什么错误。

<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>

Answer 1

最佳做法是说该脚本应该在一个单独的文件中取出，然后包含在正文的 end 中，如下所示：

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

其中src指向文件。

这很好，因为：

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

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

更新

这里缺少分号：

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

应该是这样的：

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

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

window.setTimeout(rotate3, 7000);

Answer 2

理想情况下，您需要从外部文件加载脚本，并且HTML文件中根本没有JavaScript。然后，您将使用CSP标头提供文档。

Answer 3

忽略“最佳”做法，您的问题是您没有关闭</script>代码。

脚本不能放在body标签中

3 个答案:

更新