js怎么写红绿灯

使用JavaScript实现红绿灯效果

实现红绿灯效果的核心思路主要包括HTML结构的设计、CSS样式的定义、JavaScript控制灯光的变化。首先，我们需要创建一个红绿灯的基本结构，然后通过CSS设置其样式，最后使用JavaScript实现灯光的自动切换。接下来，我将详细介绍如何实现这一效果。

一、HTML结构设计

首先，我们需要一个简单的HTML结构来表示红绿灯。HTML部分主要包括三个圆形的div元素，分别代表红灯、黄灯和绿灯。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Red Light Green Light</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="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样式设计

接下来，我们使用CSS来定义红绿灯的样式，使其看起来更像一个实际的红绿灯。以下是CSS样式的定义：

#traffic-light {
    width: 100px;
    height: 300px;
    background-color: black;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.light {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: gray;
}
.light.red.active {
    background-color: red;
}
.light.yellow.active {
    background-color: yellow;
}
.light.green.active {
    background-color: green;
}

三、JavaScript实现灯光切换

最后，我们使用JavaScript控制灯光的自动切换。以下是JavaScript代码的实现：

document.addEventListener("DOMContentLoaded", function() {
    let lights = document.querySelectorAll(".light");
    let currentIndex = 0;
    function changeLight() {
        lights.forEach((light, index) => {
            if (index === currentIndex) {
                light.classList.add("active");
            } else {
                light.classList.remove("active");
            }
        });
        currentIndex = (currentIndex + 1) % lights.length;
    }
    setInterval(changeLight, 1000); // 每秒钟切换一次灯光
});

四、解释代码实现

1、HTML结构

HTML部分定义了一个#traffic-light的容器，包含三个div元素，分别代表红灯、黄灯和绿灯。每个div元素都有一个light类，用于应用通用样式，并且分别有不同的颜色类（red、yellow、green）。

2、CSS样式

CSS部分定义了红绿灯的外观，包括容器的大小、背景颜色、边框圆角等。每个灯光元素设置了相同的大小和圆形样式，通过.red.active、.yellow.active、.green.active类来控制不同灯光的亮起效果。

3、JavaScript逻辑

JavaScript部分主要实现灯光的自动切换。首先，通过document.querySelectorAll方法获取所有的灯光元素，并存储在lights变量中。然后定义一个currentIndex变量，表示当前亮起的灯光索引。changeLight函数遍历所有灯光元素，根据currentIndex判断当前哪个灯光应该亮起，其他灯光熄灭。最后，通过setInterval方法每秒钟调用一次changeLight函数，实现灯光的自动切换。

五、优化和扩展

1、增加红绿灯的切换时间

可以根据实际需求，调整红灯、黄灯、绿灯的亮起时间。以下是调整后的代码：

document.addEventListener("DOMContentLoaded", function() {
    let lights = document.querySelectorAll(".light");
    let currentIndex = 0;
    let intervals = [5000, 2000, 5000]; // 红灯5秒，黄灯2秒，绿灯5秒
    function changeLight() {
        lights.forEach((light, index) => {
            if (index === currentIndex) {
                light.classList.add("active");
            } else {
                light.classList.remove("active");
            }
        });
        setTimeout(() => {
            currentIndex = (currentIndex + 1) % lights.length;
            changeLight();
        }, intervals[currentIndex]);
    }
    changeLight(); // 初始化调用
});

2、增加手动控制功能

如果需要手动控制红绿灯的切换，可以添加按钮和事件监听器。以下是修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Red Light Green Light</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
    <button id="next-button">Next</button>
    <script src="script.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function() {
    let lights = document.querySelectorAll(".light");
    let currentIndex = 0;
    function changeLight() {
        lights.forEach((light, index) => {
            if (index === currentIndex) {
                light.classList.add("active");
            } else {
                light.classList.remove("active");
            }
        });
    }
    document.getElementById("next-button").addEventListener("click", function() {
        currentIndex = (currentIndex + 1) % lights.length;
        changeLight();
    });
    changeLight(); // 初始化调用
});

六、总结

通过以上步骤，我们成功实现了一个简单的红绿灯效果。使用HTML定义基本结构、CSS设置样式、JavaScript实现灯光切换，并且通过调整代码实现了时间控制和手动控制功能。这个过程不仅展示了前端开发的基本技能，也为实际项目中的复杂需求提供了参考。未来可以进一步扩展功能，如增加动画效果、集成到更复杂的交通模拟系统中。