用js写交通灯倒计时思路

好的，以下是用 JavaScript 实现交通灯倒计时的思路：

1. 首先，我们需要在 HTML 中创建三个 div 元素，分别代表红灯、黄灯、绿灯。

2. 在 CSS 中，为这三个 div 元素分别设置样式，使它们呈现出交通灯的形态。

3. 在 JavaScript 中，我们需要定义三个变量来分别表示红灯、黄灯和绿灯的倒计时时间（以秒为单位），例如：

let redTime = 10;
let yellowTime = 3;
let greenTime = 15;

4. 接着，我们需要编写一个函数来控制交通灯的变化。该函数首先应该将红灯的 div 元素显示出来，同时将黄灯和绿灯的 div 元素隐藏起来。然后，等待 redTime 秒后，将红灯的 div 元素隐藏起来，将黄灯的 div 元素显示出来，并等待 yellowTime 秒后，将黄灯的 div 元素隐藏起来，将绿灯的 div 元素显示出来，并等待 greenTime 秒后，循环执行此操作。

5. 最后，我们需要调用该函数来启动交通灯的倒计时。可以使用 setInterval 函数来每隔一秒钟执行一次该函数，例如：

setInterval(changeLight, 1000);

完整代码示例如下：

HTML:

<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>

CSS:

#red {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    display: none;
}

#yellow {
    width: 50px;
    height: 50px;
    background-color: yellow;
    border-radius: 50%;
    display: none;
}

#green {
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
    display: none;
}

JavaScript:

let redTime = 10;
let yellowTime = 3;
let greenTime = 15;

function changeLight() {
    document.getElementById("red").style.display = "block";
    document.getElementById("yellow").style.display = "none";
    document.getElementById("green").style.display = "none";
    setTimeout(function() {
        document.getElementById("red").style.display = "none";
        document.getElementById("yellow").style.display = "block";
        document.getElementById("green").style.display = "none";
        setTimeout(function() {
            document.getElementById("red").style.display = "none";
            document.getElementById("yellow").style.display = "none";
            document.getElementById("green").style.display = "block";
            setTimeout(function() {
                changeLight();
            }, greenTime * 1000);
        }, yellowTime * 1000);
    }, redTime * 1000);
}

setInterval(changeLight, 1000);