正文

红绿灯工作原理揭秘：HTML代码教你轻松模拟交通信号灯

/0 浏览量
0803

在城市的每一个角落，红绿灯都是我们生活中不可或缺的一部分。它们的存在，保障了交通的有序进行，减少了交通事故的发生。今天，我们就来揭秘红绿灯的工作原理，并通过HTML代码教你如何轻松模拟一个交通信号灯。

红绿灯的工作原理

红绿灯，顾名思义，是由红、黄、绿三种颜色的灯光组成的交通信号设施。它们的工作原理非常简单：

  1. 红灯：表示停止，车辆和行人必须停止。
  2. 黄灯：表示警告，车辆和行人应尽快停止，不要进入交叉路口。
  3. 绿灯：表示通行，车辆和行人可以正常通行。

红绿灯的变化是由交通信号控制器控制的，控制器根据预设的时间或者实时交通流量来控制红绿灯的变化。

HTML代码模拟交通信号灯

现在，让我们用HTML和CSS来模拟一个简单的交通信号灯。

1. 创建HTML结构

首先，我们需要创建一个HTML文件，并在其中定义三个按钮，分别代表红、黄、绿灯。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交通信号灯模拟</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="traffic-light">
        <button id="red">红灯</button>
        <button id="yellow">黄灯</button>
        <button id="green">绿灯</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

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

/* style.css */
.traffic-light {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
}

button {
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50%;
    background-color: #ccc;
    font-size: 24px;
    color: white;
}

#red {
    background-color: red;
}

#yellow {
    background-color: yellow;
}

#green {
    background-color: green;
}

3. 添加JavaScript逻辑

最后，我们需要添加一些JavaScript代码，来控制按钮点击时灯的变化。

// script.js
document.getElementById('red').addEventListener('click', function() {
    document.getElementById('red').style.backgroundColor = 'red';
    document.getElementById('yellow').style.backgroundColor = '#ccc';
    document.getElementById('green').style.backgroundColor = '#ccc';
});

document.getElementById('yellow').addEventListener('click', function() {
    document.getElementById('red').style.backgroundColor = '#ccc';
    document.getElementById('yellow').style.backgroundColor = 'yellow';
    document.getElementById('green').style.backgroundColor = '#ccc';
});

document.getElementById('green').addEventListener('click', function() {
    document.getElementById('red').style.backgroundColor = '#ccc';
    document.getElementById('yellow').style.backgroundColor = '#ccc';
    document.getElementById('green').style.backgroundColor = 'green';
});

通过以上步骤，我们就完成了一个简单的交通信号灯模拟。当然，这只是一个非常基础的示例，实际的红绿灯控制系统要复杂得多，但这个示例可以帮助你理解红绿灯的基本工作原理。

-- 展开阅读全文 --