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);
})();
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！