用html编写一个红绿灯,如何用html+css+javascript写一个简易红绿灯

好的，我可以帮你解答这个问题。

首先，我们可以使用HTML创建一个基本的红绿灯框架，包括三个圆形灯泡，如下所示：

<div class="traffic-light">
  <div class="bulb red"></div>
  <div class="bulb yellow"></div>
  <div class="bulb green"></div>
</div>

然后，我们可以使用CSS为红绿灯灯泡添加样式，如下所示：

.traffic-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

最后，我们可以使用JavaScript控制红绿灯的变化，如下所示：

function trafficLight() {
  var red = document.querySelector('.red');
  var yellow = document.querySelector('.yellow');
  var green = document.querySelector('.green');

  setInterval(function() {
    red.classList.add('active');
    green.classList.remove('active');
  }, 5000);

  setInterval(function() {
    yellow.classList.add('active');
    red.classList.remove('active');
  }, 6000);

  setInterval(function() {
    green.classList.add('active');
    yellow.classList.remove('active');
  }, 10000);
}

trafficLight();

这段JavaScript代码将每隔5秒钟将红灯点亮，每隔6秒钟将红灯变为黄灯，每隔10秒钟将黄灯变为绿灯。

综上所述，这是一个简单的HTML+CSS+JavaScript红绿灯示例。