Javascript 交通灯序列_Javascript_Html

Javascript 交通灯序列

javascript html

Javascript 交通灯序列,javascript,html,Javascript,Html,这是我的交通灯序列代码。我想知道如何添加一个计时器，以每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">

这是我的交通灯序列代码。我想知道如何添加一个计时器，以每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>


JavaScript任务3
这是我的红绿灯脚本
换灯
var list=[“/assets/red.jpg”、“/assets/redamber.jpg”、“/assets/green.jpg”、“/assets/amber.jpg”]；
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）
指数=0；
var image=document.getElementById（'light'）；
image.src=列表[索引]；
}

使用

setInterval

功能

第一个参数是要调用的函数，第二个参数是应该调用的频率，以毫秒为单位

var timer = setInterval(changeLights,3000);

var list=[“/assets/red.jpg”、“/assets/redamber.jpg”、“/assets/green.jpg”、“/assets/amber.jpg”]；
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）
指数=0；
var image=document.getElementById（'light'）；
image.src=list[index]；}
var定时器=设置间隔（changeLights，3000）
JavaScript任务3
这是我的红绿灯脚本
更改灯光
使用设置间隔
功能
第一个参数是要调用的函数，第二个参数是应该调用的频率，以毫秒为单位
var timer = setInterval(changeLights,3000);


var list=[“/assets/red.jpg”、“/assets/redamber.jpg”、“/assets/green.jpg”、“/assets/amber.jpg”]；
var指数=0；
函数changeLights（）{
指数=指数+1；
if（index==list.length）
指数=0；
var image=document.getElementById（'light'）；
image.src=list[index]；}
var定时器=设置间隔（changeLights，3000）
JavaScript任务3
这是我的红绿灯脚本
更改指示灯
您可以使用setTimeout（功能、时间）设置静态计时器
在您的情况下，如果您希望每隔3秒不断重复一次计时器，那么每次changeLights（）函数结束时都可以运行setTimeout
看
有了这个改变，一旦你启动灯，这个功能将每3秒钟重复一次
计时器变量还允许您使用以下命令停止计时器（可能在您的情况下使用另一个按钮）：
希望这有帮助
您可以使用setTimeout（函数，时间）设置静态计时器
在您的情况下，如果您希望每隔3秒不断重复一次计时器，那么每次changeLights（）函数结束时都可以运行setTimeout
看
有了这个改变，一旦你启动灯，这个功能将每3秒钟重复一次
计时器变量还允许您使用以下命令停止计时器（可能在您的情况下使用另一个按钮）：
希望这对你有所帮助
setInterval（changeLights，3000）
…你的老师教过你或吗？我们可以自动将“交通灯顺序”问题标记为重复问题吗？当然可以，请随意setInterval（changeLights，3000）…您的老师教过您或吗？我们可以自动将“交通灯顺序”问题标记为重复问题吗？当然可以，请放心谢谢，这真的很有帮助！！谢谢，这真的很有帮助！！谢谢，非常感谢！！如果您不介意，您可以点击投票按钮下的绿色复选标记接受我的答案。谢谢，非常感谢！！如果你不介意的话，你可以点击投票按钮下的绿色复选标记来接受我的答案。
clearTimeout(timer);