JavaScript红绿灯倒计时显示在灯内部
时间: 2023-12-10 19:41:59 浏览: 66
要实现红绿灯倒计时显示在灯内部,可以使用HTML、CSS和JavaScript。
首先,需要创建一个包含三个圆形灯的HTML结构。每个灯都有一个内部圆形,用于显示倒计时。HTML代码如下:
```html
<div class="traffic-light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
```
接着,使用CSS样式来定义灯的外观和位置。在这里,我们使用绝对定位来将内部圆形放置在灯的中心。CSS代码如下:
```css
.traffic-light {
position: relative;
width: 100px;
height: 250px;
}
.red, .yellow, .green {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
```
最后,使用JavaScript来实现倒计时功能。可以使用setInterval函数来定时更新内部圆形的文本内容。JavaScript代码如下:
```javascript
var red = document.querySelector('.red');
var yellow = document.querySelector('.yellow');
var green = document.querySelector('.green');
function startTimer(element, time) {
var interval = setInterval(function() {
time--;
element.innerText = time;
if (time <= 0) {
clearInterval(interval);
}
}, 1000);
}
startTimer(red, 10);
startTimer(yellow, 5);
startTimer(green, 15);
```
在这个例子中,我们使用了startTimer函数来开始倒计时。该函数接受两个参数:一个元素和倒计时的时间。它使用setInterval函数每秒更新内部圆形的文本内容,直到倒计时时间到达0。在这个例子中,我们分别为红、黄、绿三个灯设置了不同的倒计时时间。
完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>红绿灯倒计时</title>
<style>
.traffic-light {
position: relative;
width: 100px;
height: 250px;
}
.red, .yellow, .green {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="traffic-light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<script>
var red = document.querySelector('.red');
var yellow = document.querySelector('.yellow');
var green = document.querySelector('.green');
function startTimer(element, time) {
var interval = setInterval(function() {
time--;
element.innerText = time;
if (time <= 0) {
clearInterval(interval);
}
}, 1000);
}
startTimer(red, 10);
startTimer(yellow, 5);
startTimer(green, 15);
</script>
</body>
</html>
```