自動交通燈動畫

我建立了一個腳本，以一個恆定的速率自動循環通過紅綠燈。然而，我想讓燈光在不同的時間間隔變化，以儘可能逼真。自動交通燈動畫

這是紅綠燈腳本：

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
\t  <title>Traffic lights system</title> 
 
\t </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> \t 
 
<button class="button" onclick="automatic()">Automatic lights</button> 
 
<button class="button" onclick="pauseAutomation()">Stop automation</button> 
 
</div> 
 
\t <script> 
 
var TrafficLightCase = ["red.jpg", 'yellownred.jpg', 'green.jpg', 'yellow.jpg']; 
 
var TrafficLightPosition = 0; 
 
\t function changeImage() { 
 
\t TrafficLightPosition++; 
 
\t  if (TrafficLightPosition == 4) { 
 
\t \t TrafficLightPosition = 0; 
 
} 
 
document.getElementById('TrafficLight').src = TrafficLightCase[TrafficLightPosition]; 
 
} 
 
function automatic() { 
 
    time_interval = setInterval(changeImage, 1000); 
 
} \t 
 
function pauseAutomation() { 
 
    clearInterval(time_interval); 
 
} 
 
    </script>

來源

2016-12-27 trust me daddy

你只有4例燈。您可以針對不同間隔的不同功能使用不同的功能，以獲得最簡單的方案。

來源

2016-12-28 00:06:29

你能告訴我要做的那些代碼嗎？ –

自動交通燈動畫

回答

相關問題