红绿灯样式展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="lightDiv">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</body>
</html>
<script>
// 绿灯10秒 黄灯3秒 红灯10秒 循环执行
// 获取三个Light盒子
let light = document.getElementsByClassName('light');
let greenLight = light[0]; // 绿灯盒子
let yellowLight = light[1]; // 黄灯盒子
let redLight = light[2]; // 红灯盒子
// 分装一个红绿灯亮灯秩序顺序的一个函数
// 通过给当前盒子添加class名来改变当前盒子的样式
function lightFunction () {
greenLight.setAttribute('class', 'greenLight'); // 绿灯一开始就是亮的
setTimeout(() => {
// 十秒之后绿灯灭,黄灯亮
greenLight.setAttribute('class', 'light');
yellowLight.setAttribute('class', 'yellowLight');
}, 10000);
setTimeout(() => {
// 黄灯亮三秒后,黄灯灭,红灯亮
yellowLight.setAttribute('class', 'light');
redLight.setAttribute('class', 'redLight');
}, 13000);
setTimeout(() => {
// 红灯亮十秒后,红灯灭,绿灯亮
yellowLight.setAttribute('class', 'light');
redLight.setAttribute('class', 'light');
greenLight.setAttribute('class', 'greenLight');
}, 23000);
}
lightFunction(); // 调用红绿灯函数
// 绿灯黄灯红灯亮灯的总时长(这里总时长为23秒),然后每23秒执行一次红绿灯函数,就形成了循环
var timer = setInterval(
function () {
lightFunction()
}
, 23000)
</script>
<style>
.lightDiv {
width: 200px;
padding: 20px;
border-radius: 10px;
border: 1px #ccc solid;
display: flex;
justify-content: space-between;
}
/* 不亮灯时的样式 */
.light {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #000;
}
/* 绿灯时的样式 */
.greenLight {
width: 40px;
height: 40px;
border-radius: 50%;
background: green;
}
/* 黄灯时的样式 */
.yellowLight {
width: 40px;
height: 40px;
border-radius: 50%;
background: yellow;
}
/* 红灯时的样式 */
.redLight {
width: 40px;
height: 40px;
border-radius: 50%;
background: red;
}
</style>