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#脚本 在新建 ...
随机推荐
- 手把手学会MySql主从配置
001 开启二进制日志. vi /data/mysql/port-3306/my.cnf log-bin=mysql-bin 002 在master上为从主机新建一个专门用于同步的账户,并授权REPL ...
- 使用 ASP.NET Core MVC 创建 Web API（五）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
- renren-fast开源项目解析日志—1、项目的部署
renren_fast项目解析日志 一.环境搭建 1.后端部署 (1)下载源码 按照步骤,从码云上down了fast,zip的(引maven项目)项目包. (2)安装lombok插件 安装lombok ...
- windows 重写调试输出
// 使用OutputDebugString很不方便.不能自定义格式化输出.所以重写了一下. #include <tchar.h> #include <windows.h> v ...
- docker（1）应用场景以及安装
今年来了新公司,公司没有用什么新技术,架构就简单的前后分离,但是我推一下新的技术,在这基础上我要培训一下同事,让他们能接受,对新技术不感到陌生,并且认可愿意去学习.其实在这个过程中也能让他们认同我这个 ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- 如何只在IE上加载CSS样式表
前言:IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载. IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表.如下所示,使用外部css3样式表 ...
- 同事搭一个测试RAC说节点2发现idle了，报ORA-00304
[oracle@testrac2 11204]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Wed Jan 16 1 ...
- Docker 容器与宿主机网段冲突导致网络无法 ping 通的解决方案
docker 容器网络默认使用 bridge 桥接模式,正常情况下,容器会使用 daemon.json 中定义的虚拟网桥来与宿主机进行通讯. 最近更新 Docker for mac 之后,发现以前容器 ...
- Hangfire源码解析-如何实现可扩展IOC的？
一.官方描述 These projects simplify the integration between Hangfire and your favorite IoC Container. The ...