js实现交通灯效果
主体结构
<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实现跑马灯效果，包括了原生JS实现跑马灯效果的使用技巧和注意事项，需要的朋友参考一下 效果如下：（动态效果可复制代码查看，案例中的图片可自行选择添加） 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍JS实现图片幻灯片效果代码实例，包括了JS实现图片幻灯片效果代码实例的使用技巧和注意事项，需要的朋友参考一下 其效果是点击图片切换到下一张图片 首先准备五张图片 样式 js 其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 两者效果叠加则可用 fadeToggle() fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()->
-
本文向大家介绍JS实现的幻灯片切换显示效果，包括了JS实现的幻灯片切换显示效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的幻灯片切换显示效果。分享给大家供大家参考，具体如下： html： js： 效果图如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScri
-
本文向大家介绍JS实现的手机端精简幻灯片效果，包括了JS实现的手机端精简幻灯片效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的手机端精简幻灯片效果。分享给大家供大家参考，具体如下： 效果图： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript遍历算法与技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧
-
本文向大家介绍vue 实现走马灯效果，包括了vue 实现走马灯效果的使用技巧和注意事项，需要的朋友参考一下 Part.1 问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3 代码 HTML CSS JS Part.4 注意点 在 js 中我使用的是
-
本文向大家介绍canvas实现探照灯效果，包括了canvas实现探照灯效果的使用技巧和注意事项，需要的朋友参考一下 canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域) 也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存，并在以后的任意时间通过restore()方法对