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. gulp、browsersync代理跨域

    //gulpfile.js "use strict"; const gulp = require("gulp"), newer = require(" ...

  2. 鸟哥的Linux私房菜笔记第四章

    前言 对着<鸟哥的Linux私房菜-基础版>做了简化笔记.不想让自己知其然而不知其所然.所以写个博客让自己好好巩固一下,当然不可能把书中的内容全部写下来.在这里就简化一点把命令写下来. 让 ...

  3. python接口自动化（十七）--Json 数据处理---一次爬坑记（详解）

    简介 有些 post 的请求参数是 json 格式的,这个前面发送post 请求里面提到过,需要导入 json模块处理.现在企业公司一般常见的接口因为json数据容易处理,所以绝大多数返回数据也是 j ...

  4. Windows下Goland的Terminal设置为Git Bash

    Windows下Terminal默认的使用的是系统自带的cmd,功能实在太少,用起来远不如Git Bash来得方利和高效.其实要在Goland的Terminal中使用Bash设置起来也很简单,设置位置 ...

  5. 产品管理开发之Git工作流和分支规范推荐

    前言 无论是开源项目还是内部项目,使用Git都是大势所趋,尤其是在产品管理这块,使用Git大大提高了开发效率和产品的交付频率.本篇,针对Git的工作流和分支使用,进行了一些推荐. 目录 1     产 ...

  6. 第10章 协议和声明类型常量 - IdentityModel 中文文档(v1.0.0)

    使用OAuth 2.0,OpenID Connect和声明时,声明类型和protocoal值有很多"魔术字符串".IdentityModel提供了几个常量字符串类来帮助它. 10. ...

  7. Docker -v 对挂载的目录没有权限 Permission denied

    1.问题 今天在使用docker挂载redis的时候老是报错 docker run -v /home/redis/redis.conf:/usr/local/etc/redis/redis.conf ...

  8. android 系统dialog的应用

    应用示例如下: /* * 提示类型dialog */ private void dialog1(){ AlertDialog.Builder builder = new AlertDialog.Bui ...

  9. python3 变量理解 解释器理解 常量理解 用户交互理解 逻辑运算

    先来条NLP再说...... 九,每人都已经具备使自己快乐的资源 每一个人都有过成功快乐的体验,也即是说有使自己快乐的能力. 人类只用了大脑能力极少部分,提升大脑的运用,很多新的突破便会出现. 运用大 ...

  10. 使用exceljs时报错：no such file or directory

    最近使用exceljs生成excel并保存时,总是失败 await workbook.xlsx.writeFile(tep) .then(function () { context.result = ...