模拟实现红绿灯
Posted 无赖H4
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟实现红绿灯相关的知识，希望对你有一定的参考价值。
模拟实现红绿灯
模拟实现红绿灯
利用html+CSS+JS实现红绿灯
效果：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="uft-8">
<title>红绿灯</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
div#traffic-lights {
width: 600px;
height: 150px;
background-color: rgb(10, 10, 10);
border-radius: 75px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
div#traffic-lights>div {
width: 100px;
height: 100px;
border-radius: 50%;
color: white;
text-align: center;
line-height: 100px;
font-size: 30px;
}
.red {
background-color: rgb(255, 0, 0);
}
.yellow {
background-color: rgb(255, 255, 0);
}
.green {
background-color: rgb(0, 255, 0);
}
.off {
background-color: grey;
}
</style>
</head>
<body>
<div id="traffic-lights">
<div class="red off">
<div></div>
</div>
<div class="yellow off"></div>
<div class="green"></div>
</div>
<script>
// 设定各个灯亮的持续时间
var redDuration = 5;
var yellowDuration = 3;
var greenDuration = 4;
var redLight = document.querySelector(".red");
var yellowLight = document.querySelector(".yellow");
var greenLight = document.querySelector(".green");
var currentLight = greenLight;
// 记录当前亮的灯已经还有多久就该换了
var timeout = greenDuration;
// 设置定时器
setInterval(function () {
timeout--;
currentLight.innerText = "";
if (timeout == 0) {
if (currentLight == greenLight) {
greenLight.classList.add("off");
yellowLight.classList.remove("off");
timeout = yellowDuration;
currentLight = yellowLight;
} else if (currentLight == yellowLight) {
yellowLight.classList.add("off");
redLight.classList.remove("off");
timeout = redDuration;
currentLight = redLight;
} else {
redLight.classList.add("off");
greenLight.classList.remove("off");
timeout = greenDuration;
currentLight = greenLight;
}
}
currentLight.innerText = timeout;
}, 1000);
</script>
</body>
</html>
以上是关于模拟实现红绿灯的主要内容，如果未能解决你的问题，请参考以下文章