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. JAVA基础第四章-集合框架Collection篇

    业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...

  2. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  3. 深度学习之卷积神经网络(CNN)的应用-验证码的生成与识别

    验证码的生成与识别 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10755361.html 目录 1.验证码的制 ...

  4. openlayers4 入门开发系列之图层控制（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. AndroidStduio3.0 使用gradle将module打包jar文件

    AndroidStduio3.0使用gradle将module打包jar文件,首先需要安装gradle. 打开控制台输入      open -e .bash_profile     命令,就可以打开 ...

  6. Android音视频之AudioTrack播放音频(二)

    前一篇讲了如何录制wav音频文件,本篇就来讲讲如何播放wav文件,这里就是使用AudioTrack来播放音频,确切的说是播放pcm格式数据,使用AudioTrack播放也没什么难度,主要就是将数据写入 ...

  7. IDEA zookeeper插件的使用

    安装插件 file-settings-Plugins 搜索zookeeper,并安装,安装完成后重启IDEA 配置IP地址和端口 位于Other settings 中的zookeeper选项中配置 注 ...

  8. 【jframe】Java架构师之路 - 第01篇：Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...

  9. dropload.js（上拉加载插件使用过程中遇到的坑）

    dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...

  10. MySQL学习（一）日志与索引 --- 2019年1月

    1.MySQL的架构 1).连接器 先根据Ip和端口号,用户名和密码,连接MySQL数据库,连接后如果没有下一步动作,连接就处于空闲状态,此时有一个连接超时时间的设置 wait_timeout默认8小 ...