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剩余字数计算的代码
Jul 03 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
JS验证字符串功能
Feb 22 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JavaScript 数组详解
2013/10/10 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Vue实现验证码功能
2019/12/03 Javascript
vue实现信息管理系统
2020/05/30 Javascript
python中List的sort方法指南
2014/09/01 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python如何实现的二分查找算法
2020/05/27 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
中国梦演讲稿5分钟
2014/08/19 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫