话不多说上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
</head>
<body>
<h1>倒计时功能</h1>
<label for="time-input">倒计时时间:</label>
<input type="number" id="time-input" min="1" required>
<button id="start-button">开始倒计时</button>
<div id="countdown-display"></div>
<script>
// 获取页面元素
var timeInput = document.getElementById("time-input");
var startButton = document.getElementById("start-button");
var countdownDisplay = document.getElementById("countdown-display");
// 定义变量
var countdownInterval;
var timeRemaining;
// 绑定按钮点击事件
startButton.addEventListener("click", function () {
// 获取用户输入的时间
var timeInSeconds = parseInt(timeInput.value);
// 验证用户输入的时间
if (isNaN(timeInSeconds) || timeInSeconds < 1) {
alert("Please enter a valid time in seconds.");
return;
}
// 启动倒计时
startCountdown(timeInSeconds);
});
// 启动倒计时
function startCountdown(timeInSeconds) {
// 计算倒计时结束时间
var endTime = Date.now() + timeInSeconds * 1000;
// 更新倒计时显示
updateCountdownDisplay(endTime);
// 每秒更新倒计时显示
countdownInterval = setInterval(function () {
updateCountdownDisplay(endTime);
}, 1000);
}
// 更新倒计时显示
function updateCountdownDisplay(endTime) {
// 计算剩余时间
timeRemaining = Math.floor((endTime - Date.now()) / 1000);
// 倒计时结束
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
countdownDisplay.innerHTML = "倒计时结束!";
return;
}
// 更新倒计时显示
countdownDisplay.innerHTML = "剩余: " + timeRemaining + " 秒";
}
</script>
</body>
</html>
在上面的代码中，我们首先获取页面上的元素，并定义了一些变量用于处理倒计时逻辑。
然后，我们绑定了按钮的点击事件，并在点击按钮时获取用户输入的时间。如果用户输入无效，我们会弹出一个警告。
接下来，我们定义了startCountdown 函数，它将启动倒计时并更新倒计时显示。我们使用 setInterval函数每秒钟更新一次倒计时显示，直到倒计时结束。
最后，我们定义了 updateCountdownDisplay函数，它计算剩余时间并更新倒计时显示。如果倒计时结束，我们清除定时器并显示倒计时完成的提示。