实现交通灯效果

Posted 2020-08-27

主体结构

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

 

 

Save