js实现交通灯效果


Posted in Javascript onJanuary 13, 2017

主体结构

<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);
})();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
js 替换
2008/02/19 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
javaScript语法总结
2016/11/25 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python-基础-入门 简介
2014/08/09 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
用Python shell简化开发
2018/08/08 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python编程的核心知识点总结
2021/02/08 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
生日礼品店创业计划书范文
2014/03/21 职场文书
3分钟演讲稿
2014/04/30 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS