在这个html实现交通信号灯功能代码中，使用了一个 div 元素来表示交通信号灯，并使用 CSS 的类来表示三种不同颜色的灯。另外，还添加了一个 div 元素来表示读秒器，初始值为 30 秒。
下面是一个简单的 HTML 代码，可以实现交通信号灯以及读秒的功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交通信号灯</title>
<style>
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="light" class="red"></div>
<div id="timer">30</div>
<script>
var light = document.getElementById("light");
var timer = document.getElementById("timer");
var timeLeft = 30;
function switchLight() {
if (light.classList.contains("red")) {
light.classList.remove("red");
light.classList.add("green");
timeLeft = 15;
} else if (light.classList.contains("green")) {
light.classList.remove("green");
light.classList.add("yellow");
timeLeft = 3;
} else if (light.classList.contains("yellow")) {
light.classList.remove("yellow");
light.classList.add("red");
timeLeft = 30;
}
}
setInterval(function() {
timeLeft--;
timer.innerHTML = timeLeft;
if (timeLeft === 0) {
switchLight();
}
}, 1000);
</script>
</body>
</html>
在 JavaScript 部分，定义了一个 switchLight 函数，用来切换灯的颜色和倒计时时间。同时，使用 setInterval 函数每秒钟执行一次计时器，并更新倒计时器的值。当倒计时器的值为 0 时，执行 switchLight 函数，切换灯的颜色和倒计时时间。
需要注意的是，这只是一个简单的示例代码，没有考虑到很多实际情况，例如交通信号灯的控制可能需要更复杂的逻辑。如果要实际应用，还需要根据实际需求进行修改和完善。
评论