红绿灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红绿灯</title>
</head>
<body>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid white;
opacity: 0.1;
}
.light {
opacity: 1;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#time {
margin-left: 30px;
font-size: 70px;
}
</style>
红绿灯
<p>
<span id="red" class="light"></span>
<span id="yellow"></span>
<span id="green"></span>
<b id="time">10</b>
</p>
<script>
var current = 'red';
var time = 10;
function changeLight(from, to, timeout) {
if (time > 0) {
return;
}
current = to;
time = timeout;
document.getElementById(from).removeAttribute('class', 'light');
document.getElementById(to).setAttribute('class', 'light');
}
setInterval(function() {
time--;
if (current === 'red') {
changeLight('red', 'yellow', 3);
} else if (current === 'yellow') {
changeLight('yellow', 'green', 8);
} else if (current === 'green') {
changeLight('green', 'red', 10);
}
document.getElementById('time').innerText = time;
}, 1000);
</script>
</body>
</html> 这段代码是一个模拟红绿灯的简单示例。代码中定义了三个圆形<span>元素，分别对应红、黄、绿三个信号灯。通过给对应的<span>元素添加或移除`light`类来控制信号灯是否亮起。
变量`current`表示当前亮起的信号灯，变量`time`表示当前信号灯剩余时间，初始值为10秒。
`changeLight()`函数用于改变信号灯的状态。它接收两个参数，from表示要改变的信号灯的标识，to表示要改变成的信号灯的标识，timeout表示改变后的信号灯持续时间。该函数首先检查当前时间是否大于0，如果大于0则返回，即不改变信号灯的状态。否则，将current变量更新为to的值，将time变量更新为timeout的值，然后将from对应的<span>元素移除`light`类，将to对应的<span>元素添加`light`类。
`setInterval()`函数用于定时执行指定的函数。此处将每秒钟执行一次匿名函数。在匿名函数中，首先将time减1，然后根据current的值来决定是否需要改变信号灯的状态。如果current是'red'，则调用changeLight('red', 'yellow', 3)函数；如果current是'yellow'，则调用changeLight('yellow', 'green', 8)函数；如果current是'green'，则调用changeLight('green', 'red', 10)函数。最后，更新页面上显示的time的值。
运行这段代码，你会看到一个模拟红绿灯的效果。初始状态下，红灯亮起，倒数计时从10开始，每秒钟减1。当时间减到0时，红灯变黄，持续3秒钟，然后黄灯变绿，持续8秒钟，接着绿灯变红，持续10秒钟，再循环往复。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]