HTML代码：

在一个div容器内，设置3个span

<body>

<div id="i1">

    <span class="light red_light"></span>

    <span class="light yellow_light"></span>

    <span class="light green_light"></span>

</div>

CSS代码：

<style>

        .red_light {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            margin-left: 10px;

            display: inline-block;

            background-color: red;

        }

        .yellow_light {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            margin-left: 10px;

            display: inline-block;

            background-color: yellow;

        }

        .green_light {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            margin-left: 10px;

            display: inline-block;

            background-color: green;

        }

        .light {

            width: 200px;

            height: 200px;

            background-color: #777777;

            border-radius: 50%;

            margin-left: 10px;

            display: inline-block;

        }

        #i1 {

            width: 660px;

            height: 200px;

            margin: 0 auto;

            border: black 10px solid;

        }

    </style>

在css中，light在后面，所以后面变换颜色通过的是 classList.toggle('light')

此时的效果

scipt代码：

<script>

    function l() {

        r_l()//红灯亮

        setTimeout(y_l, 1000);//黄灯一秒后亮

        setTimeout(r_l, 1000);//黄灯亮的同时关闭红灯

        setTimeout(g_l, 2000);//绿灯两秒后亮

        setTimeout(y_l, 2000);//绿灯亮，黄灯熄

        setTimeout(g_l, 3000);//三秒后，红灯熄

    }

    function r_l() {

        //获取红灯

        let r = document.getElementsByClassName('red_light')[0];

       //toggle函数，如果有该属性，则去除，没有该属性，则添加

       r.classList.toggle('light')

    }

    function g_l() {

        //同上

        let r = document.getElementsByClassName('green_light')[0];

        r.classList.toggle('light')

    }

    function y_l() {

        //同上

        let r = document.getElementsByClassName('yellow_light')[0];

        r.classList.toggle('light')

    }

    //红灯10秒，黄灯2秒，绿灯10秒

    l(); //先执行函数

    window.onload = function () {

        t1 = setInterval(l, 3000)//每隔三秒重复执行函数

    };

//每隔三秒的时间是因为每个灯各闪一秒，如果改变了灯的持续时间，循环时间也要修改

</script>

效果图：

js之制作简易红绿灯的更多相关文章

  1. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

  2. 免费IP代理池定时维护，封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池，并制作简易流量爬虫

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...

  3. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  4. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  5. C#制作简易屏保（转）

    C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...

  6. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  7. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  8. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  9. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

随机推荐

  1. jquery版 发同步请求 自定义头部信息 公共请求体

    //jquery版 发同步请求 function getData(url,param,fn){ var Authorization=localStorage.getItem("Authori ...

  2. go语言调度器源代码情景分析之六：go汇编语言

    go语言runtime(包括调度器)源代码中有部分代码是用汇编语言编写的,不过这些汇编代码并非针对特定体系结构的汇编代码,而是go语言引入的一种伪汇编,它同样也需要经过汇编器转换成机器指令才能被CPU ...

  3. 有道云笔记MarkDown 插入图片

    前言: 在网上找了很多有道云笔记的markdown笔记如何插入本地图片,试了好几种方式都是一时可以显示而已,只要电脑重启或者换终端查看就无法显示图片了.网上常用的方法无非两种有效:github.博客. ...

  4. 『备注』GDI+ 绘制文本有锯齿，透明背景文本绘制

    背景: GDI+ 绘制文本 时,如果 背景是透明的 —— 则会出现 锯齿. //其实,我不用这三个 属性 好多年了 //而且,这三个属性 在关键时刻还有可能 帮倒忙 //关键是:这三个属性,鸟用都没有 ...

  5. 第一次JVM分析记录：Out of Memory Error (workgroup.cpp:96), pid=6196, tid=139999645685504

    tomcat的catalina.out日志报错如下: Exception in thread "http-bio-8081-Acceptor-0" java.lang.OutOfM ...

  6. Git默认用户名和密码设置

    使用git的时候每次都需要输入密码,操作过程十分繁琐,非常不人性化,增加开发工作时间,也特别烦恼. 今天我们就来说说这个问题: 首先,如果我们git clone的下载代码的时候是连接的https:// ...

  7. 配置Asp.Net Web项目NLog配置文件的位置

    在使用NLog在asp.net项目中发现,如果想单独配其配置文件的位置时没有像Log4Net的特性配置方案,可以使其提供的 XmlLoggingConfiguration类来初始化: 见:https: ...

  8. 使用d3.v5实现饼状图

    效果图: 饼状图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. 你在为谁工作——IT帮深圳分站2019年3月线下活动回顾

    对于工作,在每个人的心中,它所占的份量都是不一样的.有的人活着是为了工作,有的人工作是为了更好的生活. 在3月24日下午,北京.上海与深圳三地我们同步举办了关于工作这个话题的沙龙活动. 我们深圳分站参 ...

  10. Linux下单机实现Zookeeper集群

    安装配置JAVA开发环境 下载ZOOKEEPER zookeeper下载地址 在下载的zookeeper目录里创建3个文件,zk1,zk2,zk3,用于存放每个集群的数据文件. 并在三个目录下创建da ...