用javascript实现红绿灯效果功能描述要求如下 红灯绿 灯亮灯市长均为30秒黄灯亮灯时长为3秒实现效果要求有红绿黄三色灯有倒计时屏幕如此反复
实现思路:
-
定义三个状态:红灯、绿灯、黄灯,每个状态对应的时间长度。
-
使用定时器 setInterval(),每隔一秒判断当前状态和时间长度,更新状态和倒计时屏幕。
-
根据当前状态更新红绿黄三色灯的颜色。
-
当倒计时屏幕倒计时结束时,重置状态,重新开始计时。
代码实现:
<html>
<head>
<title>红绿灯效果</title>
<style>
#light {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
margin: 50px auto;
}
#countdown {
font-size: 40px;
text-align: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div id="light"></div>
<div id="countdown"></div>
<script>
var redTime = 30; // 红灯时长
var greenTime = 30; // 绿灯时长
var yellowTime = 3; // 黄灯时长
var state = 'red'; // 当前状态
var timeLeft = redTime; // 倒计时时间
function updateLight() {
var light = document.getElementById('light');
switch(state) {
case 'red':
light.style.backgroundColor = '#f00';
break;
case 'green':
light.style.backgroundColor = '#0f0';
break;
case 'yellow':
light.style.backgroundColor = '#ff0';
break;
}
}
function updateCountdown() {
var countdown = document.getElementById('countdown');
countdown.innerHTML = timeLeft + ' 秒';
}
function updateState() {
switch(state) {
case 'red':
if(timeLeft == 0) {
state = 'green';
timeLeft = greenTime;
} else {
timeLeft--;
if(timeLeft == yellowTime) {
state = 'yellow';
}
}
break;
case 'green':
if(timeLeft == 0) {
state = 'yellow';
timeLeft = yellowTime;
} else {
timeLeft--;
}
break;
case 'yellow':
if(timeLeft == 0) {
state = 'red';
timeLeft = redTime;
} else {
timeLeft--;
}
break;
}
updateLight();
updateCountdown();
}
setInterval(updateState, 1000);
</script>
</body>
</html>
注意事项:
-
在更新状态时,要根据当前状态和时间长度判断下一个状态和倒计时时间。
-
要使用定时器 setInterval() 定时执行更新状态的函数
原文地址: https://www.cveoy.top/t/topic/gSm0 著作权归作者所有。请勿转载和采集!