有人可以帮助我放入setInterval()创建交通灯序列而无需使用按钮来更改颜色

此代码允许用户单击按钮进行交通灯序列：

<!DOCTYPE html> 
<html> 
<body>  
    <h1>JavaScript Task 3- Traffic Light Sequence </h1> 
  <img id="light" src="./assets/red.png" height="205" width="95">
  <button type="button" onclick="changeLights()">Change Lights</button>  
  <script> 
    var colours = ["./assets/red.png","./assets/red_and_amber.png", "./assets/green.png","./assets/amber.png" ];
    var index = 0;
    function changeLights() {
      index = index + 1;      
      if (index == colours.length) 
        index = 0;      
      var image = document.getElementById('light');     
      image.src = colours[index]; 
    } 
  </script>  
</body> 
</html>

我需要删除此按钮，以使不同的交通灯颜色在设定的时间内连续变化。我知道要使用setInteval()，但我不确定在代码中需要在哪里。例如，如果正在显示红灯，则在3000毫秒后（例如）红色和琥珀色的灯应显示。

要使用setInterval，您只需要：

setInterval(function() {
    //Do something every n milliseconds
}, n);//the number of milliseconds

您只是在调用一个函数，可能是：

setInterval(changeLights, 3000);

这是一个演示：

var colours = ["red", "green", "yellow"];
var index = 0;
function changeLights() {
    index = index + 1;
    if (index == colours.length)
        index = 0;
    var image = document.getElementById('light');
    image.style.backgroundColor = colours[index];
};
setInterval(function() {
    changeLights()
}, 3000);
changeLights();

#light{
	height: 100px;
	width: 100px;
}

<h2>JavaScript Task 3- Traffic Light Sequence </h2>
<div id="light"></div>

，如果将setTimeout()放入changeLights中，则可以使用setInterval()而不是setTimeout()实现相同的效果，调用非常函数changeLights：

setInterval(changeLights, 3000);

这是演示：

var colours = ["red", "green", "yellow"];
var index = 0;
function changeLights() {
    index = index + 1;
    if (index == colours.length)
        index = 0;
    var image = document.getElementById('light');
    image.style.backgroundColor = colours[index];
    setTimeout(changeLights, 3000);
};
changeLights();

#light{
	height: 100px;
	width: 100px;
}

<h2>JavaScript Task 3- Traffic Light Sequence </h2>
<div id="light"></div>

put window.setInterval（Changelights，3000）;在代码结束时...应该有效：）

-Mathew

相关内容

最新更新

热门标签：