函数 countDown() 21 SEC - Javascript

在web应用程序中，计时器是常用的功能之一，countDown()函数可以帮助开发者实现一个简单的计时器。此函数使用纯Javascript编写，功能是倒计时一个给定的时间（单位为秒）。

使用方法

使用该函数很简单，只需要在HTML页面中添加一个计时器元素，然后在Javascript代码中调用countDown()函数即可。以下是使用该函数的示例：

<!-- 在此处添加一个计时器元素 -->
<div id="timer">21</div>

// 调用函数并传递时长参数
countDown(21);

function countDown(duration) {
  var timer = document.querySelector('#timer');
  var intervalId = setInterval(function () {
    timer.innerHTML = duration--;
    if (duration < 0) {
      clearInterval(intervalId);
      alert('倒计时结束！');
    }
  }, 1000);
}

函数说明

countDown(duration)函数接受一个表示时间长度的参数（单位为秒），并且返回一个倒计时进行时的intervalId，以便于停止倒计时。详见如下代码注释：

function countDown(duration) {
  // 获取计时器元素
  var timer = document.querySelector('#timer');
  // 设置倒计时每隔1秒执行一次的回调函数
  var intervalId = setInterval(function () {
    // 每执行一次回调函数，将计时器元素的内容减1
    timer.innerHTML = duration--;
    // 如果时间到了，停止倒计时并弹框提示用户
    if (duration < 0) {
      clearInterval(intervalId);
      alert('倒计时结束！');
    }
  }, 1000);
}

功能扩展

除了倒计时时间以外，countDown()函数还可以接收其他参数以进行更多的扩展。例如，可以添加一个回调函数参数，在倒计时结束时调用回调函数进行特定操作。也可以添加一个可选的倒计时完成后的文本消息，以改变默认的弹框提示。

function countDown(duration, onComplete, message) {
  var timer = document.querySelector('#timer');
  var intervalId = setInterval(function () {
    timer.innerHTML = duration--;
    if (duration < 0) {
      clearInterval(intervalId);
      if (onComplete) {
        onComplete();
      } else {
        alert(message || '倒计时结束！');
      }
    }
  }, 1000);
}