实现思路:

  1. 定义三个状态:红灯、绿灯、黄灯,每个状态对应的时间长度。

  2. 使用定时器 setInterval(),每隔一秒判断当前状态和时间长度,更新状态和倒计时屏幕。

  3. 根据当前状态更新红绿黄三色灯的颜色。

  4. 当倒计时屏幕倒计时结束时,重置状态,重新开始计时。

代码实现:

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

注意事项:

  1. 在更新状态时,要根据当前状态和时间长度判断下一个状态和倒计时时间。

  2. 要使用定时器 setInterval() 定时执行更新状态的函数

用javascript实现红绿灯效果功能描述要求如下 红灯绿 灯亮灯市长均为30秒黄灯亮灯时长为3秒实现效果要求有红绿黄三色灯有倒计时屏幕如此反复

原文地址: https://www.cveoy.top/t/topic/gSm0 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录