js實現(xiàn)交通燈效果
更新時間：2017年01月13日 10:34:37 作者：路人華
本文主要介紹了js實現(xiàn)交通燈效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
主體結(jié)構(gòu)
<ul id="traffic"> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>
樣式
#traffic>li{
display:block;
}
#traffic span{
display:inline-block;
width:50px;
height:50px;
background-color:gray;
margin:5px;
border-radius:50%;
float:left;
}
#traffic.stop li:nth-child(1) span{
background-color:yellow;
}
#traffic.wait li:nth-child(2) span{
background-color:red;
}
#traffic.pass li:nth-child(3) span{
background-color:green;
}
js代碼
利用定時器改變類名
const traffic = document.getElementById("traffic");
(function reset(){
traffic.className = "wait";
setTimeout(function(){
traffic.className = "stop";
setTimeout(function(){
traffic.className = "pass";
setTimeout(reset,2000);
},2000);
},2000);
})();
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Layui 動態(tài)禁止select下拉的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript insertAfter()定義與用法示例
這篇文章主要介紹了javascript insertAfter()定義與用法,實例分析了javascript節(jié)點(diǎn)后插入元素的實現(xiàn)與使用方法,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了完美實現(xiàn)八種js焦點(diǎn)輪播圖的具體代碼，基于完美運(yùn)動框架move2.js實現(xiàn)的焦點(diǎn)錄播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié)
在用javaScript編程的過程中，我們經(jīng)常會遇到這樣一個問題，就是需要檢測一個數(shù)據(jù)或變量的類型，本篇文章主要介紹了在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié)，有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了IntersectionObserver API 詳解篇,需要的朋友可以參考下2016-12-12
javascript內(nèi)置對象Date案例總結(jié)分析
今天總結(jié)javascript內(nèi)置對象Date的使用，并且寫一個重要的網(wǎng)頁倒計時的核心算法案例，有需要的朋友可以借鑒參考下希望能夠有所幫助，祝大家多多進(jìn)步2022-03-03
記錄微信小程序中使用wxss加載圖片并實現(xiàn)動畫的方式，最終實現(xiàn)loading效果。本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
最近要在項目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的環(huán)境搭建，并進(jìn)行了一個簡單的測試,需要的朋友可以了解下2012-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序模板template使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了JavaScript中的對象的extensible屬性介紹,JavaScript中，對象的extensible屬性用于表示是否允許在對象中動態(tài)添加新的property,需要的朋友可以參考下2014-12-12