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. javascript深入理解--作用域，作用域链，闭包的面试题解

    一.概要 作用域和作用域链是js中非常重要的特性,关系到理解整个js体系,闭包是对作用域的延伸,其他语言也有闭包的特性. 那什么是作用域?作用域指的是一个变量和函数的作用范围. 1.js中函数内声明的 ...

  2. 我敢说你不一定完全理解try 块，catch块，finally 块中return的执行顺序

    大家好,今天我们来讲一个笔试和面试偶尔都会问到的问题,并且在工作中不知道原理,也会造成滥用. 大家可能都知道,try 块用来捕获异常,catch块是处理try块捕获的异常,finally 块是用来关闭 ...

  3. OSPF 高级实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.理解 OSPF 虚链路原理及何时需要使用虚链路. 2.掌握 OSPF 虚链路配置方法. 3.掌握 OSPF 的 ...

  4. gitbook 入门教程之前置知识

    markdown 基本知识 markdown 是一种简化的 html 语法,相比于 txt 无格式文本更强大. 你可以用专门的软件去编辑 markdown 文件,就像需要使用软件编辑 txt 文件一样 ...

  5. The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "SDSSDFCC" was unable to begin a distributed transaction.

    Question: SQL SERVER 通过Linkserver连接A和B 2台,A对B执行单条的增删改查没有异常(没有配置DTC) 但是开启事务后就会出现报错 Solution: 在A和B上配置D ...

  6. 2. [mmc subsystem] mmc core数据结构和宏定义说明

    一.host相关 1.struct mmc_host struct mmc_host是mmc core由host controller抽象出来的结构体,用于代表一个mmc host控制器. 数据结构如 ...

  7. 致 CODING 用户的元宵问候

    元宵快乐! 感谢您一直以来对 CODING 的理解与支持.2019 年 CODING 也走入了创业的第五个年头,为了将"让开发更简单"的愿景落地,我们做了许多探索,产品完成度也在不 ...

  8. happens-before 理解

    从JDK 5 开始,JMM就使用happens-before的概念来阐述多线程之间的内存可见性.在JMM中,如果一个操作执行的结果需要对另一个操作可见, 那么这2个操作之间必须要存在happens-b ...

  9. NodePort，LoadBalancer还是Ingress？我该如何选择 - kubernetes

    原文:http://mp.weixin.qq.com/s/dHaiX3H421jBhnzgCCsktg 当我们使用k8s集群部署好应用的Service时,默认的Service类型是ClusterIP, ...

  10. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...