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#脚本 在新建 ...
随机推荐
- 【.NET异步编程系列1】：await&async语法糖让异步编程如鱼得水
前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...
- 看看redis中那些好玩的module (sql on redis, bf/cf on redis)
自从redis加入了module功能之后,redis的生态就很有意思了,每个领域的大佬都会以插件的形式给redis扩展一些新的功能,比如本篇说到的rediSQL,rebloom. 一:rediSQL ...
- Spring学习(一)：理解IoC容器
序言 记得刚毕业那会儿,出来招工作被问到Spring的核心时,都觉得简单的一笔,直接说不就是IoC(控制反转)和DI(依赖注入)么,然后省略一万字对两个名词的解释.最近空来整理了一下Spring中Io ...
- 第14章 纪元时间转换 - IdentityModel 中文文档(v1.0.0)
JWT令牌使用所谓的Epoch或Unix时间来表示日期/时间. IdentityModel包含用于DateTime和DateTimeOffset转换到/来自Unix时间的扩展方法: var dt = ...
- 第5章 令牌自省端点(Token Introspection Endpoint) - IdentityModel 中文文档(v1.0.0)
OAuth 2.0令牌自省的客户端库是作为HttpClient扩展方法提供的. 以下代码将引用令牌发送到内省端点: var client = new HttpClient(); var respons ...
- C#工具:WebAPI常见问题及解决方案
Web.config中连接字符串配置问题解决方法:<ConnectionStrings>中<add>的providerName写错正确写法:providerName=" ...
- 关于数据库管理系统DBMS--关系型数据库（MySQL/MariaDB）
数据库的结构(3种):层次,网状,关系型(用的最多): DBMS的三层模型: 视图层:面向最终用户: 逻辑层:面向程序员或DBA: 物理层:面向系统管理员: 关系型数据库管理系统——RDBMS: 主要 ...
- frp内网 穿透映射使内网svn可外网访问
起因 公司svn目前部署在内网服务器上,现在想在家中也可以使用,因此需要外网访问内网的工具 经过 使用过几个产品: utools,一个小巧的windows下的工具,内网映射只是它的一个小功能,支持tc ...
- SQL Server中是否可以准确获取最后一次索引重建的时间？
在SQL Server中,我们能否找到索引的创建时间?最后一次索引重建(Index Rebuild)的时间? 最后一次索引重组(INDEX REORGANIZE)的时间呢? 答案是我们无法准确的找到 ...
- win7下建立超级隐藏账户
win7下建立超级隐藏账户 实验目的: 隐藏用户,不让管理员简单的发现 隐藏方法: 1.命令提示符中创建隐藏账户这种方法只能将账户在"命令提示符"中进行隐藏,而对于"计算 ...