<!DOCTYPE>
<html>
<body>
<img id="traffic" src="assets/red.gif">
<on type="on" onclick="ChangeLights()">Change Lights</on>
<script>
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights() {
setInterval(function () {ChangeLights();}, 1000);
index = index + 1;
if (index == lights.length) index = 0;
var image = document.getElementById('traffic');
image.src=lights[index];
}
</script>
</body>
</html>
嗨,我正在尝试使用 JavaScript 制作动画脚本,以便一旦按下按钮,交通灯序列在计时器上从红色--绿色-变化。我只希望序列循环一次。但是,当我将 setInterval 函数实现到函数中时,灯光仅从红色--绿色-红色变化。谢谢任何帮助!
var lights = {
red: "https://upload.wikimedia.org//commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
yellow: "https://upload.wikimedia.org//commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png",
green: "https://upload.wikimedia.org//commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
};
var sequence = ['red', 'yellow', 'green', 'yellow'];
function startChangeLights() {
for (var index = 0; index < sequence.length; index++) {
changeLight(index, sequence[index]);
}
function changeLight(index, color) {
setTimeout(function() {
var image = document.getElementById('traffic');
image.src = lights[color];
}, index * 1000);
}
}
<div>
<img height=100px id="traffic" src="https://upload.wikimedia.org//commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png">
</div>
<div>
<on type="on" onclick="startChangeLights()">Change Lights</on>
</div>
https://codepen.io/anon/pen/VbKQNj?editors=1011
如果你正在寻找一个时间序列,你必须在 javascript 中使用“setTimeout”方法,此外,定义一个内部函数,如下所示:
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights() {
function innerChangeLight(){
index = index + 1;
if (index == lights.length) index = 0;
var image = document.getElementById('traffic');
image.src=lights[index];
}
innerChangeLight();
setTimeout(function () {
innerChangeLight();
}, 1000);
}
<!DOCTYPE>
<html>
<body>
<img id="traffic" src="assets/red.gif">
<on type="on" onclick="ChangeLights()">Change Lights</on>
</body>
</html>
试试这个:
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights(){
setInterval(function() {
if(index == lights.length) {
return;
}
var image = document.getElementById('traffic');
image.src=lights[index];
index = index + 1;
}, 1000);
}
<img id="traffic" src="assets/red.gif"><br>
<on onclick="ChangeLights()">Change Lights</on>
“交通灯”的新实例:
交通灯不能总是在每个灯的持续时间相同。
所以,我开始扩展这个 html 代码。改进的代码在每个灯中都有不同的秒数:
// Traffic Light
// Improved with different durations in every light!
// But in this html code, i will use input tag instead
var TrafficLights = (function() {
// The image
var imageTag = document.getElementById("lightImg");
// Keep track of whether the sequence is running
var running = false;
// Different stages of the traffic light (Also defines the light)
var stages = [
{
"name": "red",
"path": "https://upload.wikimedia.org//commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
},
{
"name": "green",
"path": "https://upload.wikimedia.org//commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
},
{
"name": "yellow",
"path": "https://upload.wikimedia.org//commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png"
}
];
// Different amount of seconds in every light change (Must be an positive integer!)
var seconds_every_step = [
18,
24,
3
];
// Current stage of the traffic light
var stage = 0;
// Current steps of the traffic light
var steps = 0;
// Timer for automatically changing light
var timer = null;
/** * Start the traffic light sequence * */
function start() {
// Mark that the light sequence is running
running = true;
// Tell the light to change
changeLight();
}
/** * Stop the sequence from running * */
function stop() {
// Mark that the sequence is not running
running = false;
// Stop the automatic timer from running
clearInterval(timer);
}
/** * Change the light to the next one in the sequence * */
function changeLight() {
// If the timer is not running, this function does not need to do anything
if (running === false) {
clearInterval(timer);
return;
} else {};
// If the current stage gets higher than the number of stages there are, reset to 0
if (stage >= stages.length) {
stage = 0;
} else {};
// If the current steps gets higher than the number of seconds in a step there are, reset to 0
if (steps >= seconds_every_step.length) {
steps = 0;
} else {};
// Get the image from the list of stages
var image = stages[stage];
var wait_seconds = seconds_every_step[steps];
// Update the image tag and defines the light name
imageTag.src = image.path;
imageTag.alt = String("Traffic light color is " + image.name + ".");
// Increase the current stage by 1
stage++;
// Increase the current steps by 1
steps++;
// Set a timeout to change the light at the next interval
timer = setTimeout(changeLight, wait_seconds * 1000);
}
// These functions will be available on the `TrafficLights` object to allow interaction
return {
start: start,
stop: stop
}
})();
<input type="image" width="20px" id="lightImg" src="" alt="">
<br/>
<p>
<on type="on" onclick="TrafficLights.start()">Start Sequence</on> <on type="on" onclick="TrafficLights.stop()">Stop Sequence</on>
</p>
您可能会看到错误代码。忽略它...
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(72条)