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. Jmeter利用正则表达式提取器提取登录cookie供下一步使用

    最近在学Jmeter,遇到需要登录之后才能进行下一步操作的场景,网上查了各位大神的资料,东拼西凑总算是做好满足需求了,写一下经过和步骤吧. 一.正常调用 按正常流程添加线程组.HTTP请求(登录和添加 ...

  2. 约定Service构建方式

    对于DevOps中,将开发好的软件交付给运维人员去部署与维护,过程中参杂着诸多不可控制的变量,如环境问题.版本问题等等,而Docker容器极大程度上解决了这些问题,同时对于服务的持续交付,也变得方便和 ...

  3. ajax调用WebAPI添加数据

    //获取账号名 var Name = document.getElementById("Text1").value;//获取密码 var Pass = document.getEl ...

  4. Visual Studio 2019 发布活动 - 2019 年 4 月 2 日

    Visual Studio 2019 发布活动 2019 年 4 月 2 日,星期二 | 上午 9:00 (PT) 围观: https://visualstudio.microsoft.com/zh- ...

  5. Api管家系列（二）：编辑和继承Class

    上篇写了个大概,今天我详细说一下参数的编辑,废话不多说 先打开一个项目,我要特别说一下设置里的“默认参数设置” 打开默认参数设置,这里我用红色圈出的tab可以设置请求头,返回头和返回状态,这些设置会在 ...

  6. Exp4恶意代码分析 20164312 马孝涛

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行.  1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sy ...

  7. 分布式之 BASE理论

    ------------------------------珍惜眼前的学习机会,当你现在有机会学习各种经验时,一定要倍加珍惜.靠混日子是混不了一辈子的,许多过程都是不能省略的,至少学会这些经验可以让你 ...

  8. 阿里云SLB出现502 Bad Gateway 错误排查解决方法

    502 Bad Gateway The proxy server received an invalid response from an upstream server. 原本系统是通过一个SLB转 ...

  9. 多媒体管理器解析IMultimediaManager

    一.基本API bool Available { get; } bool Working { get; } AdvancedOptions Advanced { get; } 二.作为通信引擎 str ...

  10. Android 开发之v4库冲突问题解决方案说明

    问题背景 Android Studio 开发时使用到了 GSYVideoPlayer 开源的播放器框架,配置信息如下: implementation 'com.shuyu:GSYVideoPlayer ...