文章详情
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>运行效果
以上就是利用js实现简易红绿灯的详细内容，更多关于js 实现红绿灯的资料请关注码农网其它相关文章！
版权：版权申明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 70068002@qq.com 举报，一经查实，本站将立刻删除。
转载请注明出处：https://www.stntk.com/2403.html/dongtai/web/
相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求，是要在现有的表格中实现类似 Excel 中的数据条的效果，在数据比较多的时候单纯看表格里的数字会比…
js 实现汉字简体和繁体之间的互相转换
简体字 简体字（Simplified Chinese，简体中文），是中国大陆地区目前在用的字体，由官方公布的简体字，主要由传承字以及1950…
如何使用nginx配置代理多个前端资源？
背景 两套不同的前端使用同一个后端服务，前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢？ 1、HTML代码 <ul class="list-group"> …
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
前端如何实现网页变灰功能？
今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！ 实现思路 先来看看一些主流网站是如何实现置灰的： BiliBili： 京东 …
还没有评论呢，快来抢沙发~