用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 {
  width: 100px;
  height: 300px;
  background-color: black;
  border-radius: 10px;
  position: relative;
}

.bulb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 10px auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

JavaScript代码：

function setRed() {
  document.querySelector(".red").classList.add("active");
  document.querySelector(".yellow").classList.remove("active");
  document.querySelector(".green").classList.remove("active");
}

function setYellow() {
  document.querySelector(".red").classList.remove("active");
  document.querySelector(".yellow").classList.add("active");
  document.querySelector(".green").classList.remove("active");
}

function setGreen() {
  document.querySelector(".red").classList.remove("active");
  document.querySelector(".yellow").classList.remove("active");
  document.querySelector(".green").classList.add("active");
}

setInterval(function() {
  setRed();
  setTimeout(function() {
    setYellow();
  }, 2000);
  setTimeout(function() {
    setGreen();
  }, 4000);
}, 6000);

在页面中引入以上代码，就可以实现一个简单的红绿灯效果。其中，通过设置类名的方式，控制红绿灯灯泡的状态，通过JavaScript中的定时器控制红绿灯的变换。