javascript制作一个倒计时

83 阅读1分钟
<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>
  </body>
  <script>
    // 找到要用的和要操作的元素
    // 启动按钮和暂停按钮
    var startButton = document.querySelector("input:nth-of-type(1)");
    var pauseButton = document.querySelector("input:nth-of-type(2)");
    // 分钟数和秒数
    var minuteSpan = document.querySelector("span:nth-of-type(1)");
    var secondSpan = document.querySelector("span:nth-of-type(2)");
    // 分钟数和秒数发生变化,首先是确定分钟数和秒数
    // 一开始的总时间
    var timeNumber =
      parseInt(minuteSpan.innerHTML) * 60 + parseInt(secondSpan.innerHTML);
    //   定义最开始的分钟数和秒数
    var minuteNumber = 0;
    var secondNumber = 0;
    // 间隔执行函数的返回值,一个序号
    var intervalNumber = 0;
    // 是否开始倒计时的标记
    var isStart = false;
    // 开始操作,如果点击了,就运行
    startButton.onclick = function () {
      // 如果已经开始了倒计时,就不再执行代码
      if (isStart) {
        return; /* 遇到return就停止执行 */
      }
      // 一旦开始,标记间隔执行函数开启
      isStart = true;
      intervalNumber = setInterval(function () {
        // 间隔实行函数里面开始运行
        timeNumber--;
        minuteNumber = Math.floor(timeNumber / 60);
        secondNumber = timeNumber % 60;
        // 分钟数和秒数前补0
        if (minuteNumber < 10 && minuteNumber >= 0) {
          minuteNumber = "0" + minuteNumber;
        }
        if (secondNumber < 10 && secondNumber >= 0) {
          secondNumber = "0" + secondNumber;
        }
        // 分钟数和秒数都有了,写到网页里面
        minuteSpan.innerHTML = minuteNumber;
        secondSpan.innerHTML = secondNumber;
        //分钟数和秒数不能一直运行下去,看是否到0了
        if (minuteNumber === "00" && secondNumber == "00") {
          // 间隔执行函数停止
          clearInterval(intervalNumber);
          //   都为0了,开始按钮就不能再点了
          startButton.disabled = true;
        }
      }, 100);
    };

    // 下面开始对暂停按钮进行操作
    pauseButton.onclick = function () {
      clearInterval(intervalNumber);
      //   倒计时结束
      isStart = false;
    };
  </script>
</html>