问自动交通灯动画
EN

Stack Overflow用户

提问于 2016-12-28 07:54:02

回答 0查看 186关注 0票数 0

我构建了一个脚本，它以恒定的速率自动循环通过交通灯中的信号灯。但是，我想让灯光以不同的时间间隔变化，以使其尽可能逼真。

这是红绿灯脚本：

<!DOCTYPE HTML>
<html>
     <head>
	    <title>Traffic lights system</title> 
	 </head>
<body bgcolor="#5106A5">
<h1 style="text-align:center;font-family:verdana">Traffic light</h1> 
<div style="text-align:center">
<img alt="Traffic Light" id="TrafficLight" src="red.jpg"></img>
</div> 
<div style="text-align:center">
<button class="button" onclick="changeImage()">Change light</button>	
<button class="button" onclick="automatic()">Automatic lights</button> 
<button class="button" onclick="pauseAutomation()">Stop automation</button>
</div>
	<script>
var TrafficLightCase = ["red.jpg", 'yellownred.jpg', 'green.jpg', 'yellow.jpg'];
var TrafficLightPosition = 0;
	function changeImage() { 
	TrafficLightPosition++;
	    if (TrafficLightPosition == 4) {
		TrafficLightPosition = 0;
}
document.getElementById('TrafficLight').src = TrafficLightCase[TrafficLightPosition];
}
function automatic() {
    time_interval = setInterval(changeImage, 1000);
}	
function pauseAutomation() {
    clearInterval(time_interval);
}
    </script>

javascript

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41353648

复制

相似问题

问自动交通灯动画
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动交通灯动画EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动交通灯动画
EN