实现交通灯效果

2017-01-13 08:18:21来源:cnblogs.com作者:路人华人点击

主体结构

<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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台