Question

我创建了一个交通信号灯模拟（数组）但是我无法弄清楚定时器的放置位置。我知道如何添加计时器，但我不知道我的代码在哪里放置计时器。请帮忙。感谢。

CODE：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Task 3</h1>

<p>This is my Traffic Light script</p>

<img id="light" src="./assets/red.jpg">

<button type="button" onclick="changeLights()">Change Lights</button>

<script>
var list = [
    "./assets/red.jpg",
    "./assets/redamber.jpg",
    "./assets/green.jpg",
    "./assets/amber.jpg"
];

var index = 0;

function changeLights() {
    index = index + 1;

    if (index == list.length) index = 0;

    var image = document.getElementById('light');
    image.src=list[index];
}
</script>

</body>
</html>

Answer 1

使用SettTimeout功能可以做到这一点。 SetTimout函数按提供的间隔延迟脚本的执行。

var list = [
    "https://upload.wikimedia.org/wikipedia/commons/b/b9/Solid_red.png",
    "./assets/redamber.jpg",
    "https://commons.wikimedia.org/wiki/File:Bullet-green.png",
    "./assets/amber.jpg"
];

var index = 0;




function changeLights() {
setTimeout(function(){
 // your code here.
      index = index + 1;

    if (index == list.length) index = 0;
  
  console.log(index);

    var image = document.getElementById('light');
    image.innerHtml=list[index];
},1000);
}

<h1>JavaScript Task 3</h1>

<p>This is my Traffic Light script</p>



<img id="light" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Solid_red.pn">

<button type="button" onclick="changeLights()">Change Lights</button>

希望这会有所帮助。

Answer 2

一种解决方案可能是添加一个计时器onlaod：

<body onload="trafficTimer(2000);">

function trafficTimer(timer) {
    setInterval(function() { changeLights(); }, timer);
};

这将改变每个2s的光线

Answer 3

而不是建议的

setInterval(function () { changeLights(); }, 1000);

您可以直接使用该函数作为回调

setInterval(changeLights, 1000);

JavaScript带有计时器的交通灯阵列

3 个答案: