DOM事件配合函数节流制作一个倒计时

87 阅读1分钟

image.png

先找到总时长,为分钟数和秒数之和。

var countSum = parseInt(spanMinute.innerHTML) * 60 + parseInt(spanSecond.innerHTML);

点击了开始按钮,开始执行间隔执行函数,总时长开始减少,分钟和秒数都更新。当总时长为0的时候,间隔执行函数停止。开始按钮也不能再点击(button.disabled = "true")

知道总时长,分钟数和秒数的计算方法:

minuteNumber = Math.floor(countSum / 60);

secondNumber = countSum % 60;

函数节流:不是每一次点击都执行间隔执行函数,不然倒计时会越走越快,在间隔执行函数执行的过程中,点击了开始按钮,不能再执行间隔执行函数,所以每一次点击执行,都要清除间隔执行函数。

开始按钮用到了间隔执行函数,结束按钮也用到了间隔执行函数,所以这个间隔执行函数一开始要用一个全局变量俩接收。这样才能在不同的的地方使用这个变量。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>倒计时时钟</title>
    <style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      #countdown {
        width: 300px;
        text-align: center;
        margin: 10px auto;
        padding: 20px 0;
      }
      span {
        color: #000;
        width: 80px;
        line-height: 2;
        background: #fbfbfb;
        border: 2px solid #b4b4b4;
        margin: 0 10px;
        padding: 0 10px;
      }
    </style>
  </head>
  <body>
    <div id="countdown">
      <span>01</span>
      分钟
      <span>20</span><input type="button" value="启动" />
      <input type="button" value="暂停" />
    </div>
    <script>
      // 开始按钮
      var starButton = document.querySelector("input:nth-of-type(1)");
      //   结束按钮
      var endButton = document.querySelector("input:nth-of-type(2)");
      //   分钟数节点
      var spanMinute = document.querySelector("span:nth-of-type(1)");
      //   秒数节点
      var spanSecond = document.querySelector("span:nth-of-type(2)");
      //定义 分钟数和秒数
      var minuteNumber = 0;
      var secondNumber = 0;
      // 因为间隔执行函数在不同的地方被用到,所以先定义一个全局变量接收这个间隔执行函数
      var intervalResult = setInterval;
      //  先定义总时长,这样才能操作分钟数和秒数
      var countSum =
        parseInt(spanMinute.innerHTML) * 60 + parseInt(spanSecond.innerHTML);
      //   console.log(countSum);
      // 点击了启动,间隔执行函数开始执行
      //   但是不能每次点击都执行间隔执行函数,
      // 所以先定义一个锁定状态,只有不锁定,才能执行间隔执行函数
      starButton.onclick = function () {
        // 不是每一次点击,间隔执行函数都要执行,
        // 而是每一次点击之前,先关闭上一个间隔执行函数
        clearInterval(intervalResult);
        intervalResult = setInterval(() => {
          // 总时间开始减少,分钟数,秒数更新
          countSum--;
          minuteNumber = Math.floor(countSum / 60);
          secondNumber = countSum % 60;
          //   分钟数前补0
          if (minuteNumber < 10 && minuteNumber > 0) {
            minuteNumber === "0" + minuteNumber;
          }
          //   秒数前补0
          if (secondNumber < 10 && secondNumber > 0) {
            secondNumber === "0" + secondNumber;
          }
          //   更新节点里面的数据
          spanMinute.innerHTML = minuteNumber;
          spanSecond.innerHTML = secondNumber;
          //   当总时长为0的时候,暂停执行,并且启动这个按钮不能点击了
          if (countSum === 0) {
            clearInterval(intervalResult);
            starButton.disabled = "true";
          }
        }, 1000);
      };

      // 点击了暂停,间隔实行函数停止
      endButton.onclick = function () {
        clearInterval(intervalResult);
      };
    </script>
  </body>
</html>