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

好的，下面是一个简单的红绿灯示例，使用 HTML、CSS 和 JavaScript 编写。

HTML 代码：

<div class="traffic-light">
  <div class="red-light light"></div>
  <div class="yellow-light light"></div>
  <div class="green-light light"></div>
</div>
<button onclick="changeLights()">Change Lights</button>

CSS 代码：

.traffic-light {
  position: relative;
  width: 100px;
  height: 300px;
  background-color: #444;
  border-radius: 10px;
}

.light {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 10px;
  transition: background-color 0.5s;
}

.red-light {
  top: 10px;
  background-color: #900;
}

.yellow-light {
  top: 100px;
  background-color: #990;
}

.green-light {
  top: 190px;
  background-color: #090;
}

JavaScript 代码：

function changeLights() {
  var red = document.querySelector('.red-light');
  var yellow = document.querySelector('.yellow-light');
  var green = document.querySelector('.green-light');

  if (red.style.backgroundColor === 'rgb(255, 0, 0)') {
    red.style.backgroundColor = '#900';
    yellow.style.backgroundColor = '#fc3';
  } else if (yellow.style.backgroundColor === 'rgb(255, 204, 0)') {
    yellow.style.backgroundColor = '#990';
    green.style.backgroundColor = '#3c3';
  } else {
    green.style.backgroundColor = '#090';
    red.style.backgroundColor = '#f33';
  }
}

这段代码创建了一个 `div` 元素作为交通信号灯，包含三个子元素，分别代表红、黄、绿三个信号灯。点击按钮调用 `changeLights()` 方法来改变信号灯颜色，切换红、黄、绿三个状态。