js实现交通灯效果
2019/6/27 21:29:09
本文主要是介绍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实现交通灯效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践