在html中用js计时器设置三个循环播放倒计时的红绿灯

在HTML中使用JavaScript创建一个计时器来控制三个循环播放的红绿灯效果，你可以这样做：

首先，在HTML部分，你需要一些元素来代表红绿灯，例如三个`<div>`元素，并给它们赋予id以便于在JavaScript中操作：

<div id="light1" style="width:50px;height:50px;background:red;"></div>
<div id="light2" style="width:50px;height:50px;background:green;"></div>
<div id="light3" style="width:50px;height:50px;background:red;"></div>

然后，在JavaScript部分，可以使用setInterval函数来实现定时切换灯光颜色：

let lights = ['red', 'green', 'yellow']; // 可选颜色列表

function changeLight(i) {
    document.getElementById(`light${i+1}`).style.backgroundColor = lights[(lights.indexOf(lights[i]) + 1) % lights.length];
}

// 每隔2秒钟切换一次灯光
setInterval(function() {
    for(let i = 0; i < 3; i++) {
        changeLight(i);
    }
}, 2000); // 2000毫秒即2秒

// 开始时先切换一次
changeLight(0);

这个脚本会每2秒切换一次红绿灯的状态，从第一个开始顺时针循环。如果想让灯从黄变红，需要调整`lights`数组的顺序。