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 婆婆高寿祝福语大全简短