js 实现倒数
实现 JavaScript 倒数功能
使用 setInterval 实现倒数计时器
let count = 10; // 设置初始倒数值
const timer = setInterval(() => {
console.log(count);
count--;
if (count < 0) {
clearInterval(timer);
console.log('倒数结束');
}
}, 1000); // 每秒执行一次使用 setTimeout 递归实现倒数
function countdown(seconds) {
console.log(seconds);
if (seconds > 0) {
setTimeout(() => countdown(seconds - 1), 1000);
} else {
console.log('倒数结束');
}
}
countdown(10); // 从10开始倒数带有暂停和继续功能的倒数计时器
let count = 10;
let timer;
let isPaused = false;
function startCountdown() {
timer = setInterval(() => {
if (!isPaused) {
console.log(count);
count--;
if (count < 0) {
clearInterval(timer);
console.log('倒数结束');
}
}
}, 1000);
}
function togglePause() {
isPaused = !isPaused;
}
startCountdown();
// 调用 togglePause() 可以暂停或继续倒数使用 Promise 和 async/await 实现倒数
async function asyncCountdown(seconds) {
for (let i = seconds; i >= 0; i--) {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(i);
}
console.log('倒数结束');
}
asyncCountdown(10);显示在页面上的倒数计时器
HTML:
<div id="countdown">10</div>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>JavaScript:
let count = 10;
let timer;
let isRunning = false;
document.getElementById('startBtn').addEventListener('click', () => {
if (!isRunning) {
isRunning = true;
timer = setInterval(() => {
count--;
document.getElementById('countdown').textContent = count;
if (count <= 0) {
clearInterval(timer);
isRunning = false;
}
}, 1000);
}
});
document.getElementById('pauseBtn').addEventListener('click', () => {
clearInterval(timer);
isRunning = false;
});这些方法提供了从简单到复杂的各种倒数实现方式，可以根据具体需求选择合适的方案。
