JS 实现一个循环倒计时
时间: 2023-07-07 08:31:52 浏览: 79
好的,以下是 JS 实现一个循环倒计时的代码:
```javascript
function countdown(count) {
let timer = setInterval(() => {
if (count >= 0) {
console.log(count);
count--;
} else {
clearInterval(timer);
}
}, 1000);
}
```
使用方法:
```javascript
countdown(10); // 从 10 开始倒计时
```
这段代码会从传入的数字开始倒计时,每秒输出当前数字,直到倒计时结束。注意,这段代码只是一个简单的倒计时示例,如果需要更复杂的倒计时功能,可能需要在代码中添加一些逻辑。
相关问题
setInterval函数来实现倒计时动画
可以使用`setInterval`函数来实现倒计时动画,具体实现方法如下:
首先,需要设置一个初始时间和一个倒计时结束时间。然后,使用`setInterval`函数循环执行一个函数,该函数将会在每个一定的时间间隔内被调用。
在该函数内部,可以获得当前时间,并计算出还有多少时间剩余。然后,根据剩余时间来更新倒计时的显示,并在时间到达结束时间时停止计时器。
以下是一个简单的示例代码:
```javascript
// 设置初始时间和结束时间
const startTime = new Date().getTime();
const endTime = startTime + 100000;
// 获取页面中的倒计时元素
const countdown = document.querySelector('.countdown');
// 定义倒计时函数
function updateCountdown() {
const currentTime = new Date().getTime();
const remainingTime = endTime - currentTime;
// 计算剩余时间的分钟和秒数
const minutes = Math.floor(remainingTime / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 更新倒计时的显示
countdown.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`;
// 如果时间到达结束时间,停止计时器
if (remainingTime <= 0) {
clearInterval(countdownInterval);
countdown.innerHTML = 'Time Up!';
}
}
// 使用setInterval函数调用倒计时函数
const countdownInterval = setInterval(updateCountdown, 1000);
```
在该示例代码中,我们首先获取了页面中的倒计时元素,并设置了初始时间和结束时间。然后,我们定义了一个`updateCountdown`函数,在函数内部计算剩余时间并更新倒计时的显示。最后,我们使用`setInterval`函数来循环调用该函数,直到时间到达结束时间时停止计时器。
js红绿灯倒计时
以下是一个简单的红绿灯倒计时的JavaScript代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>红绿灯倒计时</title>
</head>
<body>
<div id="traffic-light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<p id="timer"></p>
<script>
var redTime = 10; // 红灯倒计时时间(秒)
var yellowTime = 3; // 黄灯倒计时时间(秒)
var greenTime = 15; // 绿灯倒计时时间(秒)
var redLight = document.querySelector('.red');
var yellowLight = document.querySelector('.yellow');
var greenLight = document.querySelector('.green');
var timer = document.querySelector('#timer');
function startRedLight() {
redLight.classList.add('active');
timer.textContent = redTime + ' 秒';
var redTimer = setInterval(function(){
redTime--;
timer.textContent = redTime + ' 秒';
if (redTime == 0) {
clearInterval(redTimer);
redLight.classList.remove('active');
startYellowLight();
}
}, 1000);
}
function startYellowLight() {
yellowLight.classList.add('active');
timer.textContent = yellowTime + ' 秒';
var yellowTimer = setInterval(function(){
yellowTime--;
timer.textContent = yellowTime + ' 秒';
if (yellowTime == 0) {
clearInterval(yellowTimer);
yellowLight.classList.remove('active');
startGreenLight();
}
}, 1000);
}
function startGreenLight() {
greenLight.classList.add('active');
timer.textContent = greenTime + ' 秒';
var greenTimer = setInterval(function(){
greenTime--;
timer.textContent = greenTime + ' 秒';
if (greenTime == 0) {
clearInterval(greenTimer);
greenLight.classList.remove('active');
startRedLight();
}
}, 1000);
}
startRedLight(); // 开始红灯倒计时
</script>
<style>
#traffic-light {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#traffic-light > div {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.active {
box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5);
}
#timer {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
</style>
</body>
</html>
```
该代码会在页面上显示一个红绿灯,同时在下方显示倒计时。红灯持续10秒,黄灯持续3秒,绿灯持续15秒,然后再次循环。你可以根据需求修改倒计时的时间。