js实现交通灯效果
主体结构
<ulid="traffic"> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>
样式
#traffic>li{
display:block;
}
#trafficspan{
display:inline-block;
width:50px;
height:50px;
background-color:gray;
margin:5px;
border-radius:50%;
float:left;
}
#traffic.stopli:nth-child(1)span{
background-color:yellow;
}
#traffic.waitli:nth-child(2)span{
background-color:red;
}
#traffic.passli:nth-child(3)span{
background-color:green;
}
js代码
利用定时器改变类名
consttraffic=document.getElementById("traffic");
(functionreset(){
traffic.className="wait";
setTimeout(function(){
traffic.className="stop";
setTimeout(function(){
traffic.className="pass";
setTimeout(reset,2000);
},2000);
},2000);
})();
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！
热门推荐
10 香港老妈结婚祝福语简短
11 毕业立体贺卡祝福语简短
12 简短新年年会祝福语
13 评论小品祝福语大全简短
14 恭喜师兄结婚祝福语简短
15 员工集体辞职祝福语简短
16 高中新生祝福语 简短
17 装修祝福语男生搞笑简短
18 生日开业蛋糕祝福语简短