|
在JavaScript中，实现倒计时效果的一个常见方法是使用 setInterval 函数。这个函数可以让你设置一个时间间隔，然后在每个间隔结束时执行一个函数。在倒计时的情况下，你可以在每个时间间隔减少计时器的时间，并更新显示的时间。 下面是一个简单的HTML和JavaScript代码示例，展示了如何实现一个简单的倒计时效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Countdown Timer</title>
<script>
function startCountdown(duration, display) {
var timer = duration, minutes, seconds;
var countdownInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(countdownInterval);
display.textContent = "Time's up!";
}
}, 1000);
}
window.onload = function () {
var countdownButton = document.getElementById('start-countdown');
var timeDisplay = document.getElementById('time');
var duration = 60; // Duration in seconds
countdownButton.onclick = function () {
startCountdown(duration, timeDisplay);
};
};
</script>
</head>
<body>
<div>
<span id="time">01:00</span>
<button id="start-countdown">Start Countdown</button>
</div>
</body>
</html>
然后我们把这个代码在本地测试演示一下给大家
1、先创建一个1.html的网页文档
2、然后把上面写好的代码粘贴进去
3、然后我们打开1.html网页，点击那个按钮后发现时间就在倒计时
| 
