正文

从零开始，教你用JavaScript编写模拟红绿灯程序

/0 浏览量
0330

嗨，年轻的探索者！今天，我们要一起用JavaScript编写一个简单的模拟红绿灯程序。这个程序可以帮助你理解JavaScript的基本概念，比如函数、事件处理和条件语句。准备好了吗？让我们开始吧！

程序概述

红绿灯程序是一个很好的例子，因为它展示了如何使用JavaScript来控制不同状态之间的转换，并响应事件。在这个程序中，我们将创建一个红绿灯，它会有三种状态：红色、黄色和绿色。每种颜色会持续一定的时间，然后自动切换到下一个颜色。

准备工作

在开始编写代码之前，你需要一个HTML文件和一个CSS文件来帮助布局和样式设计。

HTML（index.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">
</head>
<body>
    <div id="traffic-light" class="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（styles.css）

.traffic-light {
    width: 100px;
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.light {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

编写JavaScript代码

现在，让我们进入script.js文件，开始编写JavaScript代码。

script.js

// 定义每个灯的颜色和持续时间
const lightColors = ['red', 'yellow', 'green'];
const durations = [3000, 1000, 3000]; // 毫秒

// 当前灯的状态
let currentLight = 0;

// 更新灯颜色的函数
function updateLightColor() {
    const lightElements = document.querySelectorAll('.light');
    lightElements.forEach((light, index) => {
        if (index === currentLight) {
            light.style.backgroundColor = lightColors[currentLight];
        } else {
            light.style.backgroundColor = 'grey';
        }
    });
}

// 设置定时器，根据持续时间切换灯的颜色
function setLightTimer() {
    const interval = setInterval(() => {
        updateLightColor();
        currentLight = (currentLight + 1) % lightColors.length;
        if (currentLight === 0) {
            clearInterval(interval);
            setLightTimer(); // 重新设置定时器
        }
    }, durations[currentLight]);
}

// 初始化红绿灯
function initTrafficLight() {
    updateLightColor();
    setLightTimer();
}

// 当页面加载完毕时，初始化红绿灯
window.onload = initTrafficLight;

总结

恭喜你，你已经完成了一个简单的红绿灯模拟程序！在这个程序中，我们使用了JavaScript的基本概念，比如函数、事件处理和定时器。这个程序展示了如何通过代码来控制不同状态之间的转换，并响应事件。

希望这个例子能帮助你更好地理解JavaScript。继续探索和学习，你将能够编写出更加复杂和有趣的程序！

-- 展开阅读全文 --