使用 setInterval 的 JavaScript 交通灯系统-6ren

使用 setInterval 的 JavaScript 交通灯系统

转载作者：行者123 更新时间：2023-11-28 05:17:48

25

4

我已经使用 javascript 制作了一个交通灯系统，并使用 setInterval 使其自行运行，但是我怎样才能使时间不同呢？例如，我希望红灯和绿灯比琥珀色和红琥珀色保持更长时间。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<h2>Learning to code</h2>
<p>This is my very first JavaScript task</p>
<img id="traffic" src="red.png">
<button type="button" onclick="dosomething()">something magical will happen if you press me</button>
<script>
var list = ["red.png", "redamber.png", "green.png", "amber.png"];
var index = 0;
var timer = setInterval(dosomething, 3000)

function dosomething(){
    index = index + 1;
    if (index == list.length) index = 0


    var image = document.getElementById('traffic');
    image.src=list[index];

}
</script>
</body>
</html>

最佳答案

这是一个使用加权时间的示例，类似于我在评论中解释的内容。我没有你的图片，所以我用文字替换了它们。

function changeColors(){
   if (index >= list.length) index = 0; 
   
   let item = list[index];
   
   if (!item.countdown) item.countdown = item.weight - 1;
   else item.countdown = item.countdown - 1;
   
   var image = document.getElementById('traffic');
   image.innerHTML=list[index].color+'-'+item.countdown;
   
   if (item.countdown == 0) index = index + 1;
}

var list = [
  {color:"red.png", weight:1}, 
  {color:"redamber.png", weight:3}, 
  {color:"green.png", weight:2}, 
  {color:"amber.png", weight:1}
];

var index = 0;

let btnChangeColors = document.getElementById('btnChangeColors');

btnChangeColors.onclick = function() {
  var timer = setInterval(changeColors, 1000);
};

<h1>JavaScript</h1>
<h2>Learning to code</h2>
<div id="traffic"/>
<button type="button" id="btnChangeColors">Start Traffic Light</button>

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

25

4

0

文章推荐： c# - 使用 htmlagilitypack 将元素添加到 html

文章推荐： javascript - Rebass 中的 React 样式 - css 前缀？

文章推荐： javascript - 选项卡无法正常工作

文章推荐： 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

商城

使用 setInterval 的 JavaScript 交通灯系统