倒计时器是为您的 Web 应用程序添加互动性和紧迫感的一种绝佳方式。本指南提供了一种创建可自定义 JavaScript 倒计时器的全面方法，涵盖从基本实现到高级功能的所有内容。
目录
构建基本倒计时器
让我们从一个简单的倒计时器开始，它从 10 秒倒计时。此示例仅使用 HTML 和 JavaScript，易于理解和实现。
<!DOCTYPE html>
<html>
<head>
<title>倒计时器</title>
</head>
<body>
<p>倒计时：<span id="countdown">10</span> 秒</p>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "时间到！";
} else {
countdownElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</body>
</html>
此代码首先设置一个初始的 timeLeft 变量。然后，它使用 setInterval 每秒重复执行一个函数。此函数递减 timeLeft 并更新显示的倒计时。一旦 timeLeft 达到 0，则清除间隔，并显示“时间到！”。
自定义您的倒计时器
让我们使用用户定义的输入和格式化输出来增强我们的计时器。
let startTime = parseInt(prompt("请输入倒计时时间（秒）："), 10);
let timeLeft = startTime;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "时间到！";
} else {
countdownElement.textContent = formattedTime;
timeLeft--;
}
}, 1000);
此改进版本提示用户输入开始时间，处理分钟和秒，并格式化输出以提高可读性（MM:SS）。
高级倒计时器功能
为了使计时器更加通用，请考虑以下增强功能：
- 事件处理：当计时器达到零时触发一个函数。这可以用于提交表单、重定向用户或执行任何其他操作。
- 暂停/恢复功能：添加按钮以暂停和恢复倒计时。
- 使用 CSS 进行样式设置：使用自定义 CSS 改善计时器的视觉吸引力。
通过结合这些技术，您可以为您的 Web 项目创建高度功能化且视觉上吸引人的倒计时器。