Question

您好我是JavaScript的新手，我正在尝试创建一个自动运行的红绿灯序列，我目前只有点击的代码，如果有人可以帮我自动完成，那就太棒了

data/mnist/t10k-images-idx3-ubyte

Answer 1

昨天发布了一个类似的问题，但我想我会在这里找到答案。

<强>的JavaScript

var timeIndex = 0;
var lightIndex = 0;
var timer;
var trafficLight = document.getElementById('light');

var lights = [
    {
    duration: 5,
    color: 'red',
    image: 'red.gif'
  },
  {
    duration: 4,
    color: 'green',
    image: 'green.gif'
  },
  {
    duration: 1,
    color: 'yellow',
    image: 'yellow.gif'
  }
]

function advanceTrafficLightTimer() {
        timeIndex++;
    if(timeIndex == lights[lightIndex].duration) {
        timeIndex = 0;
        lightIndex = lightIndex < lights.length - 1 ? lightIndex = lightIndex + 1 : 0;
        trafficLight.src = lights[lightIndex].image;
        trafficLight.className = lights[lightIndex].color;
    }

}

timer = setInterval(advanceTrafficLightTimer,1000);

<强> CSS

.red { border: 3px solid #f00; }
.green { border: 3px solid #0f0; }
.yellow { border: 3px solid #ff0; }

<强> HTML

<img id="light" class="red" src="red.gif">

JS的工作原理是每秒更新timeIndex，并针对存储在数组lightIndex中的可用红绿灯对象检查变量trafficLight。如果timeIndex已达到当前trafficLight的持续时间，则会将lightIndex更新为阵列中的下一个对象并更改图像。

您可以在此处看到它：https://jsfiddle.net/igor_9000/a2w9g8qa/3/

这似乎是一个家庭作业问题（发布有关家庭作业的问题没有错）。我已经遗漏了redamber颜色，希望补充一下这样可以让你在做作业时做一些练习。

希望有所帮助！

如何在javascript中创建自动交通灯序列

1 个答案: