利用js實(shí)現(xiàn)簡(jiǎn)易紅綠燈
HTML代碼：
在一個(gè)div容器內(nèi)，設(shè)置3個(gè)span
<body><div id='i1'> <span class='light red_light'></span> <span class='light yellow_light'></span> <span class='light green_light'></span></div>
CSS代碼：
<style> .red_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: red; } .yellow_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: yellow; } .green_light { width: 200px; height: 200px; border-radius: 50%; margin-left: 10px; display: inline-block; background-color: green; } .light { width: 200px; height: 200px; background-color: #777777; border-radius: 50%; margin-left: 10px; display: inline-block; } #i1 { width: 660px; height: 200px; margin: 0 auto; border: black 10px solid; } </style>
JS代碼
<script> function l() { r_l()//紅燈亮 setTimeout(y_l, 1000);//黃燈一秒后亮 setTimeout(r_l, 1000);//黃燈亮的同時(shí)關(guān)閉紅燈 setTimeout(g_l, 2000);//綠燈兩秒后亮 setTimeout(y_l, 2000);//綠燈亮，黃燈熄 setTimeout(g_l, 3000);//三秒后，紅燈熄 } function r_l() { //獲取紅燈 let r = document.getElementsByClassName(’red_light’)[0]; //toggle函數(shù)，如果有該屬性，則去除，沒(méi)有該屬性，則添加 r.classList.toggle(’light’) } function g_l() { //同上 let r = document.getElementsByClassName(’green_light’)[0]; r.classList.toggle(’light’) } function y_l() { //同上 let r = document.getElementsByClassName(’yellow_light’)[0]; r.classList.toggle(’light’) } //紅燈10秒，黃燈2秒，綠燈10秒 l(); //先執(zhí)行函數(shù) window.onload = function () { t1 = setInterval(l, 3000)//每隔三秒重復(fù)執(zhí)行函數(shù) };//每隔三秒的時(shí)間是因?yàn)槊總€(gè)燈各閃一秒，如果改變了燈的持續(xù)時(shí)間，循環(huán)時(shí)間也要修改</script>
運(yùn)行效果
以上就是利用js實(shí)現(xiàn)簡(jiǎn)易紅綠燈的詳細(xì)內(nèi)容，更多關(guān)于js 實(shí)現(xiàn)紅綠燈的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 利用單元測(cè)試對(duì)PHP代碼進(jìn)行檢查2. python如何實(shí)現(xiàn)word批量轉(zhuǎn)HTML3. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析4. python excel和yaml文件的讀取封裝5. python3實(shí)現(xiàn)往mysql中插入datetime類型的數(shù)據(jù)6. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決7. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊8. Django 權(quán)限管理(permissions)與用戶組(group)詳解9. App啟動(dòng)優(yōu)化-Android性能優(yōu)化10. 詳解docker pull 下來(lái)的鏡像都存到了哪里
網(wǎng)公網(wǎng)安備