欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評論