JavaScript红绿灯的倒计时在灯内部

实现红绿灯的倒计时可以借助JavaScript的定时器函数setInterval()和DOM操作。

首先，我们可以在HTML中创建三个div元素，分别表示红灯、黄灯和绿灯。然后，使用CSS设置这些灯的样式，包括颜色、大小和形状等。

接下来，在JavaScript中，我们可以定义一个变量来表示当前是哪个灯亮着，例如用数字0表示红灯，1表示黄灯，2表示绿灯。使用setInterval()函数来循环执行一个函数，该函数根据当前的灯的状态来更新倒计时时间，并且在倒计时结束时切换到下一个灯。

在更新倒计时时间时，我们可以利用DOM操作来修改灯的内部文本，例如将红灯的内部文本设置为“15秒”，黄灯设置为“5秒”，绿灯设置为“20秒”等。在倒计时结束时，我们可以将当前灯的内部文本设置为“停止”或“准备”等提示信息。

以下是一个简单的实现示例代码：

HTML代码：

<div id="red" class="light">15秒</div>
<div id="yellow" class="light">5秒</div>
<div id="green" class="light">20秒</div>

CSS代码：

.light {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#green {
  background-color: green;
}

JavaScript代码：

var lights = ["red", "yellow", "green"];
var index = 0;

setInterval(function() {
  var light = document.getElementById(lights[index]);
  var time = parseInt(light.innerText) - 1;
  if (time <= 0) {
    index = (index + 1) % 3;
    time = [15, 5, 20][index];
  }
  light.innerText = time + "秒";
}, 1000);