首页 > 基础资料 博客日记
Javascript 编写的一个红、黄、绿灯交替变亮
2025-01-07 16:00:08基础资料围观43次
本篇文章分享Javascript 编写的一个红、黄、绿灯交替变亮，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识
为了创建一个简单但功能完整的交通灯程序，我们将使用 HTML、CSS 和 JavaScript 来实现红、黄、绿三种颜色按照规定的顺序循环显示。这个例子将确保灯光按照红 -> 绿 -> 黄的顺序循环，并且可以调整每个灯光的持续时间以模拟真实的交通灯行为。
效果图
源代码
<!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>
文章来源:https://blog.csdn.net/cuclife/article/details/144831828
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
