主体结构
<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);
})();
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
js,交通灯
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“js实现交通灯效果”评论...