javascript簡單的紅綠燈
阿新 • • 發佈:2021-01-31
技術標籤:javascriptcssjs
<div class="box">
<div class="green"></div>
<div class="red"></div>
<div class="yeoolw"></div>
</div>
<div class="gz"></div>
*{ margin: 0; padding: 0; } .box{ width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; background-color: darkgray; margin-top: 200px; margin-left: 100px; } .green{ width: 30px; height: 30px; margin: 5px; background: darkgreen; border-radius: 50%; opacity: 0.3; } .red{ width: 30px; height: 30px; margin: 5px; border-radius: 50%; background: red; opacity: 0.3; } .yeoolw{ width: 30px; height: 30px; margin: 5px; border-radius: 50%; background: yellow; opacity: 0.3; } .gz{ width: 20px; height: 150px; position: relative; background: darkgray; top:1px; left: 100px; } .light{ opacity: 1; }
function x(){
r_1()//紅燈亮
setTimeout(y_1, 1000);//黃燈一秒後亮
setTimeout(r_1, 1000);//黃燈亮的同時關閉紅燈
setTimeout(g_1, 2000);//綠燈兩秒後亮
setTimeout(y_1, 2000);//綠燈亮,黃燈熄
setTimeout(g_1, 3000);//三秒後,紅燈熄
}
function r_1(){
var r=document.querySelector('.red');
r.classList.toggle('light');
}
function g_1(){
var g=document.querySelector('.green');
g.classList.toggle('light');
}
function y_1(){
var y=document.querySelector('.yeoolw');
y. classList.toggle('light');
}
x();
window.onload = function () {
t1 = setInterval(x, 3000)//每隔三秒重複執行函式
};
比較簡單吧,就是通過 setTimeout,然後通過toggle切換一下樣式,自我感覺重複率太高,值得優化一下程式碼