利用js实现简易红绿灯

作者：日天达人时间：2024-04-22 22:30:02　

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>

JS代码

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

运行效果

来源：https://www.cnblogs.com/98WDJ/p/10685559.html#4527173

标签：js,红绿灯

投稿

利用js实现简易红绿灯

猜你喜欢

MSSQL 2000 使用帮助(sql server简明教程)

pandas中df.groupby()方法深入讲解

python使用正则表达式匹配字符串开头并打印示例

胶水语言Python与C/C++的相互调用的实现

Python入门教程(十七)Python的While循环

Python基于pygame实现单机版五子棋对战

MySQL图形化管理工具Navicat安装步骤

MySQL查看和修改时区的方法

通过源码分析Golang cron的实现原理

python基础学习之组织文件

VMware workstation16 中Centos7下MySQL8.0安装过程及Navicat远程连接

如何提升JavaScript的运行速度（DOM篇）[译]

使用Python的package机制如何简化utils包设计详解

PHP中number_format()函数的用法讲解

使用pytorch实现可视化中间层的结果

SpringBoot+Mybatis-Plus实现mysql读写分离方案的示例代码

Hello! 404

asp更改Windows2000管理者密码？

界面内容优化的层次

OBJECTPROPERTY与sp_rename更改对象名称的介绍