js實(shí)現(xiàn)交通燈效果

更新時(shí)間：2017年01月13日 10:34:37 作者：路人華

本文主要介紹了js實(shí)現(xiàn)交通燈效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

主體結(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代碼

利用定時(shí)器改變類名

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);
})();

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
交通燈

相關(guān)文章

Layui 動(dòng)態(tài)禁止select下拉的例子
今天小編就為大家分享一篇Layui 動(dòng)態(tài)禁止select下拉的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript insertAfter()定義與用法示例
這篇文章主要介紹了javascript insertAfter()定義與用法,實(shí)例分析了javascript節(jié)點(diǎn)后插入元素的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下
2016-07-07
完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（下篇）
這篇文章主要介紹了完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖的具體代碼，基于完美運(yùn)動(dòng)框架move2.js實(shí)現(xiàn)的焦點(diǎn)錄播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
在javaScript中檢測(cè)數(shù)據(jù)類型的幾種方式小結(jié)
在用javaScript編程的過(guò)程中，我們經(jīng)常會(huì)遇到這樣一個(gè)問(wèn)題，就是需要檢測(cè)一個(gè)數(shù)據(jù)或變量的類型，本篇文章主要介紹了在javaScript中檢測(cè)數(shù)據(jù)類型的幾種方式小結(jié)，有興趣的可以了解一下。
2017-03-03
IntersectionObserver API 詳解篇
這篇文章主要介紹了IntersectionObserver API 詳解篇,需要的朋友可以參考下
2016-12-12
javascript內(nèi)置對(duì)象Date案例總結(jié)分析
今天總結(jié)javascript內(nèi)置對(duì)象Date的使用，并且寫一個(gè)重要的網(wǎng)頁(yè)倒計(jì)時(shí)的核心算法案例，有需要的朋友可以借鑒參考下希望能夠有所幫助，祝大家多多進(jìn)步
2022-03-03
微信小程序中使用wxss加載圖片并實(shí)現(xiàn)動(dòng)畫(huà)效果
記錄微信小程序中使用wxss加載圖片并實(shí)現(xiàn)動(dòng)畫(huà)的方式，最終實(shí)現(xiàn)loading效果。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-08-08
Knockoutjs的環(huán)境搭建教程
最近要在項(xiàng)目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的環(huán)境搭建，并進(jìn)行了一個(gè)簡(jiǎn)單的測(cè)試,需要的朋友可以了解下
2012-11-11
微信小程序模板（template）使用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序模板template使用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
JavaScript中的對(duì)象的extensible屬性介紹
這篇文章主要介紹了JavaScript中的對(duì)象的extensible屬性介紹,JavaScript中，對(duì)象的extensible屬性用于表示是否允許在對(duì)象中動(dòng)態(tài)添加新的property,需要的朋友可以參考下
2014-12-12