h5+JavaScript实现一个倒计时功能
话不多说上代码！
<!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函数，它计算剩余时间并更新倒计时显示。如果倒计时结束，我们清除定时器并显示倒计时完成的提示。
