正文

JavaScript设置60秒倒计时停止的方法

/0 浏览量
0412

在JavaScript中设置一个60秒的倒计时并停止它是一个常见的编程任务。以下是一种实现这个功能的方法，包括如何开始倒计时、如何停止倒计时以及如何处理倒计时结束的事件。

基本思路

  1. 使用setTimeout函数来设置一个定时器，该定时器会在指定的时间后执行一个函数。
  2. 在这个函数中，你可以更新一个显示倒计时的元素，或者执行其他任何你想要在倒计时结束时完成的操作。
  3. 为了停止倒计时，你可以使用clearTimeout函数来取消之前设置的定时器。

示例代码

以下是一个简单的示例，演示如何创建一个60秒的倒计时：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60秒倒计时</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 = "倒计时结束";
        }
    }, 1000);
}

window.onload = function () {
    var thirtySeconds = 60,
        display = document.querySelector('#time'); // 假设有一个id为"time"的元素用来显示倒计时

    startCountdown(thirtySeconds, display);
};

function stopCountdown() {
    var countdownInterval = window.setInterval;
    clearInterval(countdownInterval);
    document.querySelector('#time').textContent = "倒计时已停止";
}
</script>
</head>
<body>
<div id="time">00:00</div>
<button onclick="stopCountdown()">停止倒计时</button>
</body>
</html>

代码解析

  • startCountdown函数接受两个参数：duration（倒计时的总秒数）和display（一个DOM元素，用来显示倒计时）。
  • 在setInterval函数中，我们不断地更新display元素的文本内容，显示剩余的分钟和秒数。
  • 当timer变为负数时，我们使用clearInterval来停止定时器，并更新显示内容为“倒计时结束”。
  • stopCountdown函数通过调用clearInterval来停止倒计时，并更新显示内容为“倒计时已停止”。

这个示例提供了一个基本的框架，你可以根据需要对其进行修改和扩展。

-- 展开阅读全文 --