Javascript 编写的一个红、黄、绿灯交替变亮

为了创建一个简单但功能完整的交通灯程序,我们将使用 HTML、CSS 和 JavaScript 来实现红、黄、绿三种颜色按照规定的顺序循环显示。这个例子将确保灯光按照红 -> 绿 -> 黄的顺序循环,并且可以调整每个灯光的持续时间以模拟真实的交通灯行为。

效果图

源代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交通灯</title>
<link rel="stylesheet" href="styles.css">
<style>
	body {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100vh;
	    margin: 0;
	    background-color: #f0f0f0;
	}
	
	.traffic-light {
	    width: 100px;
	    background-color: #222;
	    padding: 20px;
	    border-radius: 10px;
	}
	
	.light {
	    width: 60px;
	    height: 60px;
	    margin: 10px auto;
	    border-radius: 50%;
	    background-color: #ddd;
	    transition: background-color 0.3s;
	}
	
	#red-light.active { background-color: red; }
	#yellow-light.active { background-color: yellow; }
	#green-light.active { background-color: green; }
</style>
</head>
<body>
<div class="traffic-light">
    <div id="red-light" class="light"></div>
    <div id="yellow-light" class="light"></div>
    <div id="green-light" class="light"></div>
</div>

<script >
// 获取所有灯泡元素
const redLight = document.getElementById('red-light');
const yellowLight = document.getElementById('yellow-light');
const greenLight = document.getElementById('green-light');

// 定义一个函数来激活指定的灯泡
function activateLight(light) {
    // 移除所有灯泡的 active 类
    [redLight, yellowLight, greenLight].forEach(l => l.classList.remove('active'));
    
    // 给指定的灯泡添加 active 类
    light.classList.add('active');
}

// 定义交通灯的状态顺序
const lightSequence = [redLight, yellowLight, greenLight];

// 当前索引
let currentIndex = 0;

// 创建一个间隔计时器来切换灯光
function startTrafficLight() {
    setInterval(() => {
        // 激活当前索引对应的灯泡
        activateLight(lightSequence[currentIndex]);
        
        // 更新索引到下一个状态
        currentIndex = (currentIndex + 1) % lightSequence.length;
    }, 2000); // 每 2 秒切换一次
}

// 开始交通灯循环
startTrafficLight();
	
</script>
</body>
</html>
相关推荐
Jedi Hongbin13 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
掘金安东尼1 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
得物技术1 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun1 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
薛定谔的算法1 小时前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
魔云连洲2 小时前
React中的合成事件
前端·javascript·react.js
唐•苏凯3 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军4 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。4 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴4 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js