JavaScript 交通灯-6ren

JavaScript 交通灯

转载作者：太空宇宙更新时间：2023-11-04 15:45:15

27

4

<!DOCTYPE>
<html>
<body>

<img id="traffic" src="assets/red.gif">

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

<script>
var lights = [
	"assets/red.gif",
	"assets/yellow.gif",
	"assets/green.gif",
	"assets/yellow.gif",
];

var index = 0;

function ChangeLights() {

  setInterval(function () {ChangeLights();}, 1000);
  
	index = index + 1;
	
	if (index == lights.length) index = 0;
	
	var image = document.getElementById('traffic');
    image.src=lights[index];

}


</script>

</body>
</html>

嗨，我正在尝试使用 JavaScript 制作一个动画脚本，以便一旦按下按钮，计时器上的交通灯序列就会从红 - 黄 - 绿 - 黄变化。我只想让序列循环一次。然而，当我在函数中实现setInterval函数时，灯光仅从红-黄-绿-红变化。感谢您的帮助!

最佳答案

var lights = {
  red: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
  yellow: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png",
  green: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
};

var sequence = ['red', 'yellow', 'green', 'yellow'];

function startChangeLights() {
  for (var index = 0; index < sequence.length; index++) {
    changeLight(index, sequence[index]);
  }

  function changeLight(index, color) {
    setTimeout(function() {
      var image = document.getElementById('traffic');
      image.src = lights[color];
    }, index * 1000);
  }
}

<div>
  <img height=100px id="traffic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png">
</div>
<div>
  <button type="button" onclick="startChangeLights()">Change Lights</button>
</div>

https://codepen.io/anon/pen/VbKQNj?editors=1011

关于JavaScript 交通灯，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43594730/

27

4

0

文章推荐： javascript - 如何在 div 标签内显示 jquery 验证消息

文章推荐：具有虚函数的 C++ 继承层次结构

文章推荐： jquery - 允许 SPAN 溢出其包含的 DIV

文章推荐： javascript - 电子邮件正文变量

JavaScript 交通灯
Change Lights var lights = [ "assets/red.gif", "assets/yellow.gif", "assets/green.gif", "assets
javascript-交通灯，我的图像不会显示在 html 上
var lights=["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"]
JavaScript 交通灯 OnClick 使用 Switch/Case。语法或逻辑错误？
我是一名 GCSE 学生，对 JavaScript 很陌生，所以我不确定这是逻辑错误还是语法错误。以下代码应该会导致交通灯的图片在单击按钮时发生变化(从红色变为红色琥珀色，琥珀色然后绿色等......

首页

博学

6Ren·AI

商城

JavaScript 交通灯