Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
788 views
in Technique[技术] by (71.8m points)

how to create an automatic traffic light sequence in javascript

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.

<!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

A similar question was posted yesterday, but I thought I'd chip in with an answer here.

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">

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. 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.

You can see it working here: 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.

Hope that helps!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...