使用HTML做红绿灯倒计时
时间: 2023-05-21 22:03:50 浏览: 295
可以使用JavaScript和CSS来实现红绿灯倒计时,HTML主要用于页面结构的搭建。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>红绿灯倒计时</title>
<style>
.light {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 20px;
box-shadow: 0 0 20px #fff;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
<script>
var redLight = document.querySelector('.red');
var yellowLight = document.querySelector('.yellow');
var greenLight = document.querySelector('.green');
var count = 10; // 倒计时时间,单位为秒
var timer = setInterval(function() {
if (count > 0) {
count--;
if (count == 5) {
redLight.classList.remove('red');
yellowLight.classList.add('yellow');
} else if (count == 2) {
yellowLight.classList.remove('yellow');
greenLight.classList.add('green');
}
} else {
clearInterval(timer);
}
}, 1000);
</script>
</body>
</html>
```
这段代码实现了一个简单的红绿灯倒计时效果,倒计时时间为10秒,其中红灯亮5秒,黄灯亮3秒,绿灯亮2秒。可以根据需要调整倒计时时间和各个灯的亮灭时间。