js之制作简易红绿灯
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之制作简易红绿灯的更多相关文章
- 【百度地图API】——如何用label制作简易的房产标签
原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...
- 免费IP代理池定时维护，封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池，并制作简易流量爬虫
前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...
- 原生Js_制作简易日历
javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- C#制作简易屏保（转）
C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...
- avalon.js实现一个简易日历
使用MVVM框架avalon.js实现一个简易日历 最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- 利用Unity3D制作简易2D计算器
利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...
随机推荐
- redis的Sorted Set类型！！！！
一.概述: Sorted Set(有序集合)和Set类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted Set中的每一个成员都会有一个分数(sc ...
- python接口自动化（十六）--参数关联接口后传（详解）
简介 大家对前边的自动化新建任务之后,接着对这个新建任务操作了解之后,希望带小伙伴进一步巩固胜利的果实,夯实基础.因此再在沙场实例演练一下博客园的相关接口.我们用自动化发随笔之后,要想接着对这篇随笔操 ...
- python接口自动化（八）--发送post请求的接口（详解）
简介 上篇介绍完发送get请求的接口,大家必然联想到发送post请求的接口也不会太难,被聪明的你又猜到了.答案是对的,虽然发送post请求的参考例子很简单,但是实际遇到的情况却是很复杂的,因为所有系统 ...
- [Inside HotSpot] C1编译器优化：全局值编号(GVN)
1. 值编号 我们知道C1内部使用的是一种图结构的HIR,它由基本块构成一个图,然后每个基本块里面是SSA形式的指令,关于这点如可以参考[Inside HotSpot] C1编译器工作流程及中间表示. ...
- 解决Configuration 'compile' is obsolete and has been replaced with implementation
项目中Gradle版本升级到4.4后,项目构建时,每次出现红色的警告信息: WARNING: Configuration 'compile' is obsolete and has been repl ...
- C# ASP.NET MVC:使用Cookie记住账号密码
MVC记住账号密码 使用cookie操作 前端: <div> 用户名:<input type="text" id="UserName" val ...
- VBC#代码互转工具
VBCSHARP代码互转工具,适用于VB.NET和C#代码相互转换翻译,可代码段转换和批量文件转换.于2019年3月5日制作完成,允许各群随意分发和使用. 下载地址:下载链接 欢迎使用 下载地址:下载 ...
- MD5加密Util
目录 (1)需要导入的包 (2)MD5Util类 (3)使用举例 (1)需要导入的包 <dependency> <groupId>org.apache.commons</ ...
- Windows Server 2016 安装虚拟机版黑群晖
硬件配置 Dell R730 CPU: Intel(R) Xeon(R) CPU E5-2603 v4 @1.70GHz(6 cores) Ram: 16Gb HDD: 系统-600GB SAS X2 ...
- geopyspark入门
背景 对于GIS的大数据量实时数据分析和渲染的需求,ArcGIS Server和Geoserver.普通空间数据库往往难以满足,对此我一直感觉很沮丧.这时就要寻求大数据的分布式框架帮助.(Ar ...