javascript红绿灯
时间: 2023-12-11 22:34:01 浏览: 159
以下是JavaScript实现红绿灯的代码:
```javascript
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
async function run() {
while (true) {
console.log('红灯');
await sleep(3000);
console.log('绿灯');
await sleep(2000);
console.log('黄灯');
await sleep(1000);
}
}
run();
```
上述代码中,我们使用了async/await语法来实现异步操作。在run函数中,我们使用while循环来不断切换红绿灯状态。使用sleep函数来模拟等待时间,从而实现红绿灯的切换。
相关问题
javascript红绿灯代码
JavaScript实现红绿灯的代码可以分为以下几步:
1. 首先定义一个变量来表示当前是红灯还是绿灯,可以使用布尔类型。
2. 定义一个定时器来控制红绿灯的变化,可以使用setInterval函数。
3. 在定时器内部,根据当前的状态来改变红绿灯的颜色,可以通过修改HTML元素的class属性来实现。
4. 在定时器内部,还需要更新当前状态,可以使用逻辑运算符或三目运算符来实现。
下面是一个简单的JavaScript红绿灯代码示例:
```
<html>
<head>
<style>
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="traffic-light">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
<script>
var isGreen = false;
setInterval(function() {
var lights = document.querySelectorAll('.light');
if (isGreen) {
lights.classList.add('yellow');
lights.classList.remove('yellow');
} else {
lights.classList.remove('yellow');
lights.classList.add('yellow');
}
isGreen = !isGreen;
}, 3000);
</script>
</body>
</html>
```
JavaScript红绿灯的倒计时在灯内部
实现红绿灯的倒计时可以借助JavaScript的定时器函数setInterval()和DOM操作。
首先,我们可以在HTML中创建三个div元素,分别表示红灯、黄灯和绿灯。然后,使用CSS设置这些灯的样式,包括颜色、大小和形状等。
接下来,在JavaScript中,我们可以定义一个变量来表示当前是哪个灯亮着,例如用数字0表示红灯,1表示黄灯,2表示绿灯。使用setInterval()函数来循环执行一个函数,该函数根据当前的灯的状态来更新倒计时时间,并且在倒计时结束时切换到下一个灯。
在更新倒计时时间时,我们可以利用DOM操作来修改灯的内部文本,例如将红灯的内部文本设置为“15秒”,黄灯设置为“5秒”,绿灯设置为“20秒”等。在倒计时结束时,我们可以将当前灯的内部文本设置为“停止”或“准备”等提示信息。
以下是一个简单的实现示例代码:
HTML代码:
```html
<div id="red" class="light">15秒</div>
<div id="yellow" class="light">5秒</div>
<div id="green" class="light">20秒</div>
```
CSS代码:
```css
.light {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 10px;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
```
JavaScript代码:
```javascript
var lights = ["red", "yellow", "green"];
var index = 0;
setInterval(function() {
var light = document.getElementById(lights[index]);
var time = parseInt(light.innerText) - 1;
if (time <= 0) {
index = (index + 1) % 3;
time = [15, 5, 20][index];
}
light.innerText = time + "秒";
}, 1000);
```
阅读全文