脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 交通灯

js实现交通灯效果

 更新时间：2017年01月13日 10:34:37   作者：路人华  
本文主要介绍了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);
})();

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Layui 动态禁止select下拉的例子

    Layui 动态禁止select下拉的例子

    今天小编就为大家分享一篇Layui 动态禁止select下拉的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript insertAfter()定义与用法示例

    javascript insertAfter()定义与用法示例

    这篇文章主要介绍了javascript insertAfter()定义与用法,实例分析了javascript节点后插入元素的实现与使用方法,需要的朋友可以参考下
    2016-07-07
  • 完美实现八种js焦点轮播图（下篇）

    完美实现八种js焦点轮播图（下篇）

    这篇文章主要介绍了完美实现八种js焦点轮播图的具体代码，基于完美运动框架move2.js实现的焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 在javaScript中检测数据类型的几种方式小结

    在javaScript中检测数据类型的几种方式小结

    在用javaScript编程的过程中，我们经常会遇到这样一个问题，就是需要检测一个数据或变量的类型，本篇文章主要介绍了在javaScript中检测数据类型的几种方式小结，有兴趣的可以了解一下。
    2017-03-03
  • IntersectionObserver API 详解篇

    IntersectionObserver API 详解篇

    这篇文章主要介绍了IntersectionObserver API 详解篇,需要的朋友可以参考下
    2016-12-12
  • javascript内置对象Date案例总结分析

    javascript内置对象Date案例总结分析

    今天总结javascript内置对象Date的使用，并且写一个重要的网页倒计时的核心算法案例，有需要的朋友可以借鉴参考下希望能够有所帮助，祝大家多多进步
    2022-03-03
  • 微信小程序中使用wxss加载图片并实现动画效果

    微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-08-08
  • Knockoutjs的环境搭建教程

    Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下
    2012-11-11
  • 微信小程序模板（template）使用详解

    微信小程序模板（template）使用详解

    这篇文章主要为大家详细介绍了微信小程序模板template使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript中的对象的extensible属性介绍

    JavaScript中的对象的extensible属性介绍

    这篇文章主要介绍了JavaScript中的对象的extensible属性介绍,JavaScript中，对象的extensible属性用于表示是否允许在对象中动态添加新的property,需要的朋友可以参考下
    2014-12-12

最新评论