Zamy_Arkre_Nendmed

Traffic Lights can't always be the same duration in every light.... So, i started to expand this html code.. The improved code with different seconds in every light (Credits from Webman): Start Sequence Stop Sequence <br /> // Traffic Lights v1.1 (From Webman)<br /> // Thank you very much (Webman) for creating such impressive ideas!<br /> // Improved with different durations in every light!<br /> // But in this script, i will use input tag instead<br /> var TrafficLights = (function() { <br /> // The image <br /> var imageTag = document.getElementById("lightImg"); <br /> // Keep track of whether the sequence is running <br /> var running = false; <br /> // Different stages of the traffic light (Also defines the light) <br /> var stages = [ <br /> { <br /> "name": "green", <br /> "path": "green.jpg" <br /> }, <br /> { <br /> "name": "yellow", <br /> "path": "yellow.jpg" <br /> }, <br /> { <br /> "name": "red", <br /> "path": "red.jpg" <br /> } <br /> ]; <br /> // Different amount of seconds in every light change (Must be an positive integer!)<br /> var seconds_every_step = [<br /> 6, <br /> 1, <br /> 4 <br /> ]; <br /> // Current stage of the traffic light <br /> var stage = 0; <br /> // Current steps of the traffic light <br /> var steps = 0; <br /> // Timer for automatically changing light <br /> var timer = null; <br /> /** * Start the traffic light sequence * */ <br /> function start() { <br /> // Mark that the light sequence is running <br /> running = true; <br /> // Tell the light to change <br /> changeLight(); <br /> } <br /> <br /> /** * Stop the sequence from running * */ <br /> function stop() {<br /> // Mark that the sequence is not running <br /> running = false; <br /> // Stop the automatic timer from running <br /> clearInterval(timer); <br /> } <br /> <br /> /** * Change the light to the next one in the sequence * */<br /> function changeLight() { <br /> // If the timer is not running, this function does not need to do anything <br /> if (running === false) { <br /> clearInterval(timer); <br /> return; <br /> } <br /> else { <br /> };<br /> <br /> // If the current stage gets higher than the number of stages there are, reset to 0 <br /> if (stage >= stages.length) { <br /> stage = 0; <br /> } <br /> else { <br /> }; <br /> // If the current steps gets higher than the number of seconds in a step there are, reset to 0 <br /> if (steps >= seconds_every_step.length) {<br /> steps = 0;<br /> } <br /> else {<br /> }; <br /> <br /> // Get the image from the list of stages <br /> var image = stages[stage]; <br /> var wait_seconds = seconds_every_step[steps];<br /> // Update the image tag and defines the light name<br /> imageTag.src = image.path;<br /> imageTag.alt = String("Traffic light color is " + image.name + "."); <br /> <br /> // Increase the current stage by 1 <br /> stage++; <br /> // Increase the current steps by 1 <br /> steps++; <br /> // Set a timeout to change the light at the next interval <br /> timer = setTimeout(changeLight, wait_seconds * 1000); <br /> } <br /> // These functions will be available on the `TrafficLights` object to allow interaction <br /> return { <br /> start: start, <br /> stop: stop <br /> }<br /> })();<br /> Notes! If the variable "seconds_every_step" is more than 3 lengths like this: It means that the every light based on the variable "stage" will return like this: Green light: 20 seconds, Yellow light: 40 seconds, Red light: 32 seconds, Green light: 5 seconds, Yellow light: 20 seconds (repeated step), Red light: 40 seconds, ...