java利用监听器制作红绿灯_利用js实现简易红绿灯

HTML代码：

在一个div容器内，设置3个span

CSS代码：

.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;

}

JS代码

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)//每隔三秒重复执行函数

};

//每隔三秒的时间是因为每个灯各闪一秒，如果改变了灯的持续时间，循环时间也要修改

运行效果

以上就是利用js实现简易红绿灯的详细内容，更多关于js 实现红绿灯的资料请关注脚本之家其它相关文章！

java利用监听器制作红绿灯_利用js实现简易红绿灯相关推荐

利用python制作拼图_利用python制作拼图小游戏的全过程
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块关注公众号:Python学习指南,回复"拼图"即可获取源码环境搭建安装P ...
用html编写一个红绿灯,利用js实现简易红绿灯
HTML代码: 在一个div容器内,设置3个span CSS代码: .red_light { width: 200px; height: 200px; border-radius: 50%; marg ...
用java制作扑克牌_利用java实现简单的扑克牌小游戏
扑克牌小游戏: (推荐教程:java课程) 游戏玩法简介:定义五个People在玩扑克牌游戏,玩法是5个人从一副没有大小王的扑克牌中各抽取4张,牌的类型有四种:♥,♣,♠,♦.牌的大小为从1~13.( ...
java ajax解析json数据_利用AJAX向后台servlet传JSON数据，后台利用fastjson进行解析
一,json的构建 JSON的格式分为两种,第一种类似于JavaScript中的对象(这里需要注意的是JS中的对象与java中的对象概念是不一样的,js可以在对象中定义属性,方法等,类似于java中的 ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...
java filter 返回错误消息_利用java filter 实现业务异常拦截跳转到错误信息提示页面...
1.缘由:我们在做项目中肯定都会遇到自定义业务异常 ,然后将业务异常信息跳转的统一的信息提示页面的情况,比如我们在struts的时候我们会用到struts的异常处理机制,我们在业务层会跑出我们遇到业务 ...
java导出mysql数据库失败_利用Java进行MySql数据库的导入和导出
利用Java来进行Mysql数据库的导入和导出的总体思想是通过Java来调用命令窗口执行相应的命令. MySql导出数据库的命令如下: mysqldump -uusername -ppassword ...
java判断是否第一次出现_利用java判断字符首次出现的位置,java替换最后一个特定字符...
利用java判断字符首次出现的位置利用爪哇判断字符首次出现的位置, 目的: (学习视频分享:java视频教程实现代码如下: 导入Java.util.收藏品: 导入Java.util.LinkedLi ...
java se好用吗_利用 Java SE 7 更好地管理资源
2011 年 5 月发布作者:Julien Ponge 本文介绍 Java 7 针对自动资源管理问题给出的解决办法,即 Coin 项目中提出的新语言结构 try-with-resources 语句. ...

java利用监听器制作红绿灯_利用js实现简易红绿灯

java利用监听器制作红绿灯_利用js实现简易红绿灯相关推荐

最新文章

热门文章