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

Question

Hi I'm relatively new to JavaScript and I'm attempting to create a traffic light sequence that runs automatically, the code I currently have only works on click, if anyone can help me make this automatic, that'd be great.嗨，我对 JavaScript 比较陌生，我正在尝试创建一个自动运行的红绿灯序列，我目前拥有的代码只能在点击时工作，如果有人能帮我实现自动化，那就太好了。

<!DOCTYPE html>
<html>
<body>


<img id="Change Lights" src="red.gif" width="36" height="98"> 

 <br><button onclick="nxt()" id="button">Change colour</button></br>

 <script>

var img = new Array("red.gif","redamber.gif","green.gif","yellow.gif");



var imgElement = document.getElementById("Change Lights");
var lights = 0;
var imgLen = img.length;

             function nxt()
        {
            if(lights < imgLen-1)
                {
                    lights++;
                }
            else{
                    lights=0;                
                }

                imgElement.src = img[lights];                    
        }



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

Answer 1

A similar question was posted yesterday, but I thought I'd chip in with an answer here.昨天发布了一个类似的问题，但我想我会在这里回答。

JavaScript 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 CSS

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

HTML HTML

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

The JS works by updating the timeIndex every second, and checking a variable lightIndex against the available traffic light objects stored in the array trafficLight .的JS工作通过更新timeIndex每一秒，并检查一个变量lightIndex与存储在数组中的可用业务的光的对象trafficLight 。 If the timeIndex has reached the duration of the current trafficLight , it will update the lightIndex to the next object in the array and change the image.如果timeIndex已达到当前trafficLight的持续时间，它将更新lightIndex到数组中的下一个对象并更改图像。

You can see it working here: https://jsfiddle.net/igor_9000/a2w9g8qa/3/你可以在这里看到它的工作： https : //jsfiddle.net/igor_9000/a2w9g8qa/3/

This seems to be a homework problem (nothing wrong with posting questions about homework).这似乎是一个作业问题（发布有关作业的问题没有错）。 I've left out the redamber color, hopefully adding that in gives you a little bit of practice with the homework.我已经省略了redamber ，希望添加它可以让您对作业进行一些练习。

Hope that helps!希望有帮助！

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

问题描述

1 个解决方案

解决方案1
1 2016-03-10 16:03:18

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

问题描述

1 个解决方案

解决方案1 1 2016-03-10 16:03:18

解决方案1
1 2016-03-10 16:03:18