红绿灯

吃个橘子~ · 发表于 2023-12-16 15:14:38

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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>

FishC · 发表于 2023-12-16 15:14:55

这段代码是一个模拟红绿灯的简单示例。代码中定义了三个圆形<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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 红绿灯

马上注册，结交更多好友，享用更多功能^_^