正文

掌握JavaScript，轻松模拟真实红绿灯运行规律

/0 浏览量
0825

在繁忙的城市中，红绿灯是交通秩序的重要维护者。它确保车辆和行人的安全，维持交通流畅。通过JavaScript，我们可以模拟红绿灯的运行规律，从而更好地理解其工作原理。本文将带您一步步掌握如何使用JavaScript来模拟真实红绿灯的运行。

红绿灯工作原理简述

红绿灯通常由红灯、黄灯和绿灯组成，它们按照一定的时间间隔交替闪烁，以控制交通。以下是一个简单的红绿灯周期：

  • 红灯：表示停止
  • 黄灯：表示警示，即将变换
  • 绿灯：表示通行

每个灯的颜色变换都有一个固定的时间，通常是红灯60秒，黄灯5秒，绿灯45秒。这些时间可能会根据实际交通情况而调整。

使用JavaScript模拟红绿灯

准备工作

首先，我们需要准备一个简单的HTML页面，用于显示红绿灯的状态。以下是一个基本的HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>红绿灯模拟</title>
    <style>
        /* 在这里添加样式 */
    </style>
</head>
<body>
    <div id="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
    <script src="traffic-light.js"></script>
</body>
</html>

添加CSS样式

接下来，我们需要为红绿灯添加一些样式，使其看起来更像是真实的交通信号灯：

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

.light {
    width: 50px;
    height: 100px;
    border-radius: 50%;
    background-color: #333;
    position: relative;
}

.red::before,
.yellow::before,
.green::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.red::before {
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.yellow::before {
    background-color: yellow;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.green::before {
    background-color: green;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript代码实现

现在，我们可以编写JavaScript代码来控制红绿灯的运行。以下是一个简单的模拟：

function changeLight(color) {
    const lights = document.querySelectorAll('.light');
    lights.forEach(light => {
        light.style.backgroundColor = '#333';
    });
    document.querySelector(`.light.${color}`).style.backgroundColor = color;
}

let time = 60; // 红灯时间
let interval = setInterval(() => {
    if (time <= 0) {
        changeLight('red');
        time = 60;
    } else if (time <= 5) {
        changeLight('yellow');
        time = 5;
    } else {
        changeLight('green');
        time = 45;
    }
    time--;
}, 1000);

运行模拟

将上述代码保存为 traffic-light.js，并将其与HTML页面放在同一目录下。打开HTML页面，您将看到一个动态的红绿灯模拟。

总结

通过以上步骤，我们使用JavaScript成功地模拟了真实红绿灯的运行规律。这个过程不仅加深了我们对JavaScript的理解，还让我们对交通信号灯的工作原理有了更直观的认识。希望这个示例能激发您在编程领域的创造力。

-- 展开阅读全文 --