红绿灯序列Javascript

Traffic light Sequence Javascript

本文关键字：Javascript 红绿灯      更新时间：2023-09-26

这是我的红绿灯序列代码。我想知道如何添加一个计时器，每隔3秒更改一次红绿灯的颜色，例如，当点击按钮时。谢谢

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

使用setInterval函数。

第一个参数是要调用的函数，第二个参数是应该多久调用一次，以毫秒为单位。

var timer = setInterval(changeLights,3000);


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]; } 
  var timer = setInterval(changeLights,3000);
<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>

您可以使用setTimeout（函数，时间）设置静态计时器；

在您的情况下，如果您希望每隔3秒持续重复一次计时器，您可以在每次changeLights（）函数结束时运行setTimeout

请参阅w3schools关于定时的文章

var timer;
function changeLights() {
    index = index + 1;      
    if (index == list.length) 
    index = 0;      
    var image = document.getElementById('light');     
    image.src=list[index];
    timer = setTimeout("changeLights", 3000);
}

有了这个变化，一旦你启动灯，该功能将每3秒重复一次。

计时器变量还允许您停止计时器（可能在您的情况下使用另一个按钮）：

clearTimeout(timer);

希望这能帮助

相关文章：