js实现倒计时器自定义时间和暂停

倒计时器是一个非常常见的功能，可以用于定时关闭某些功能，在活动中用于倒计时提醒等场景。本文将介绍如何使用JavaScript实现倒计时器自定义时间和暂停的功能。

实现自定义时间

首先，我们需要先实现一个基本版的倒计时器，代码如下：

// 设置倒计时时间（秒）
var countDownTime = 60;

// 获取倒计时元素
var countDown = document.getElementById("countdown");

// 开始倒计时
var intervalId = setInterval(function() {
  if(countDownTime > 0) {
    countDownTime--;
    countDown.innerHTML = countDownTime + "秒";
  } else {
    clearInterval(intervalId);
    countDown.innerHTML = "倒计时结束";
  }
}, 1000);

上述代码中，我们先设置了倒计时时间为60秒，获取了倒计时元素，并使用setInterval定时器开始倒计时。在定时器的回调函数中，我们每隔一秒钟将倒计时时间减1，直到倒计时结束。

现在，如果我们想要实现自定义时间的功能，只需要将原来的countDownTime变量改为一个输入框的值即可。具体实现代码如下：

<!-- 输入框 -->
<input type="text" id="inputDuration" placeholder="输入倒计时时间（秒）">

<!-- 按钮 -->
<button onclick="startCountDown()">开始倒计时</button>

<!-- 倒计时元素 -->
<div id="countdown"></div>

<script>
function startCountDown() {
  // 获取输入框的值
  var inputDuration = document.getElementById("inputDuration").value;
  var countDownTime = parseInt(inputDuration);

  // 获取倒计时元素
  var countDown = document.getElementById("countdown");

  // 开始倒计时
  var intervalId = setInterval(function() {
    if(countDownTime > 0) {
      countDownTime--;
      countDown.innerHTML = countDownTime + "秒";
    } else {
      clearInterval(intervalId);
      countDown.innerHTML = "倒计时结束";
    }
  }, 1000);
}
</script>

在上述代码中，我们增加了一个输入框，用于输入倒计时时间（单位为秒）。在点击开始倒计时按钮时，我们获取输入框的值，并将其转换为一个整数用于倒计时。然后，我们使用setInterval定时器开始倒计时，同样每隔一秒钟减少倒计时时间，直到倒计时结束。

实现暂停功能

现在，我们已经可以使用JavaScript实现自定义时间的倒计时器了，接下来让我们看看如何实现暂停功能。

首先，在代码中增加一个按钮，用于触发暂停操作。然后，我们需要在代码中记录倒计时器的状态，用于控制暂停和继续操作。我们在代码中新增一个变量isCounting，用于表示当前倒计时器是否在运行中。代码如下：

<!-- 输入框 -->
<input type="text" id="inputDuration" placeholder="输入倒计时时间（秒）">

<!-- 按钮 -->
<button onclick="startCountDown()">开始倒计时</button>
<button onclick="pauseCountDown()">暂停倒计时</button>

<!-- 倒计时元素 -->
<div id="countdown"></div>

<script>
var intervalId;
var isCounting = false;

function startCountDown() {
  // 获取输入框的值
  var inputDuration = document.getElementById("inputDuration").value;
  var countDownTime = parseInt(inputDuration);

  // 获取倒计时元素
  var countDown = document.getElementById("countdown");

  // 开始倒计时
  intervalId = setInterval(function() {
    isCounting = true; // 标记倒计时器正在运行
    if(countDownTime > 0) {
      countDownTime--;
      countDown.innerHTML = countDownTime + "秒";
    } else {
      clearInterval(intervalId);
      countDown.innerHTML = "倒计时结束";
    }
  }, 1000);
}

function pauseCountDown() {
  if(isCounting) {
    clearInterval(intervalId);
    isCounting = false; // 标记倒计时器已经暂停
  }
}
</script>

在上述代码中，我们新增了一个按钮，用于触发暂停操作。然后，在startCountDown函数中，添加了isCounting变量用于标记倒计时器是否在运行中，每次倒计时器在更新时间时更新isCounting的值，以便我们在暂停操作时判断其是否正在运行。在pauseCountDown函数中，我们判断isCounting变量的值，如果是true，则停止定时器并将isCounting变量设置为false，表示倒计时器已经暂停。

这样，我们就实现了JavaScript倒计时器的自定义时间和暂停功能。

示例1：

假设我们在页面中添加一个输入框和一个按钮，用于输入倒计时时间和开始倒计时操作，如下：

<label for="inputDuration">倒计时时间：</label>
<input type="text" id="inputDuration" placeholder="输入倒计时时间（秒）">
<button onclick="startCountDown()">开始倒计时</button>

<div id="countdown"></div>

我们可以使用上述代码的startCountDown和pauseCountDown函数来实现倒计时器的自定义时间和暂停功能。

示例2：

假设现在我们需要在页面中实现两个不同的倒计时器，每个倒计时器可以设置不同的倒计时时间，并支持暂停和继续操作。代码如下：

<!-- 第一个倒计时器 -->
<label for="inputDuration1">倒计时时间1：</label>
<input type="text" id="inputDuration1" placeholder="输入倒计时时间（秒）">
<button onclick="startCountDown('countdown1')">开始倒计时</button>
<button onclick="pauseCountDown()">暂停倒计时</button>

<div id="countdown1"></div>

<hr>

<!-- 第二个倒计时器 -->
<label for="inputDuration2">倒计时时间2：</label>
<input type="text" id="inputDuration2" placeholder="输入倒计时时间（秒）">
<button onclick="startCountDown('countdown2')">开始倒计时</button>
<button onclick="pauseCountDown()">暂停倒计时</button>

<div id="countdown2"></div>

<script>
var intervalId;
var isCounting = false;

function startCountDown(countDownId) {
  // 获取输入框的值
  var inputDuration = document.getElementById("inputDuration").value;
  var countDownTime = parseInt(inputDuration);

  // 获取倒计时元素
  var countDown = document.getElementById(countDownId);

  // 开始倒计时
  intervalId = setInterval(function() {
    isCounting = true; // 标记倒计时器正在运行
    if(countDownTime > 0) {
      countDownTime--;
      countDown.innerHTML = countDownTime + "秒";
    } else {
      clearInterval(intervalId);
      countDown.innerHTML = "倒计时结束";
    }
  }, 1000);
}

function pauseCountDown() {
  if(isCounting) {
    clearInterval(intervalId);
    isCounting = false; // 标记倒计时器已经暂停
  }
}
</script>

在上述代码中，我们通过给按钮添加参数的方式，将倒计时器的元素id传递到startCountDown函数中，用于指定不同的倒计时器。在每个倒计时器的HTML代码中，我们使用不同的div元素来显示不同的倒计时器元素，每个元素的id分别为"countdown1"和"countdown2"。我们在每个倒计时器的按钮中都调用了同一个pauseCountDown函数来实现暂停操作，因此，不同的倒计时器均可以进行暂停和继续操作。