码迷,mamicode.com
首页 > 其他好文 > 详细

实现交通灯效果

时间:2017-01-12 20:57:35      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:isp   js代码   ons   lock   ack   eset   ide   nbsp   ase   

主体结构

<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

实现交通灯效果

标签:isp   js代码   ons   lock   ack   eset   ide   nbsp   ase   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!