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

發(fā)布時間：2020-10-22 18:08:42 來源：腳本之家閱讀：154 作者：路人華欄目：web開發(fā)

主體結(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í)或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽