JavaScript设置倒计时效果

最新推荐文章于 2023-07-20 09:12:31 发布

weixin_33698823

最新推荐文章于 2023-07-20 09:12:31 发布

阅读量58

点赞数

原文链接：https://my.oschina.net/mpf/blog/526888

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时效果</title>
</head>
<body>
  <form name="myForm">
    <input type="text" name="h" size="6" />时
    <input type="text" name="m" size="6" />分
    <input type="text" name="s" size="6" />秒
  </form>
  <button onclick="doStart();">开始</button>
  <button onclick="doStop();">暂停</button>
  <button onclick="doGoOn();">继续</button>
  <h3 id="hid">0:0:0</h3>
  <script type="text/javascript">
      var hid = document.getElementById("hid");
      var hh = 0,mm = 0,ss = 0;
      var id = null;

      // 开始倒计时
      function doStart(){
        hh = isNaN(parseInt(document.myForm.h.value)) ? 0 : parseInt(document.myForm.h.value);
        mm = isNaN(parseInt(document.myForm.m.value)) ? 0 : parseInt(document.myForm.m.value);
        ss = isNaN(parseInt(document.myForm.s.value)) ? 0 : parseInt(document.myForm.s.value);
        if(id == null){ // 禁止多次点击产生计时效果出问题
          id = setInterval("myTime()",1000);
        }
      }

      // 暂停倒计时
      function doStop(){
        if(id != null){// 禁止多次点击产生计时效果出问题
          clearInterval(id);
        }
      }

      // 继续倒计时，只有在停止倒计时的情况下开始
      function doGoOn(){
        if(id != null){// 禁止多次点击产生计时效果出问题
          id = setInterval("myTime()",1000);
        }
      }

      // 运行倒计时
      function myTime(){
        checkTime();
        ss--; // 秒数减一
        if(ss < 0){
          ss = 59;
          mm--;
          if(mm < 0){
            mm = 59;
            hh--;
            if(hh < 0){
              alert('时间到');
              clearInterval(id);
              return;
            }
          }
        }
        // 写入hid
        hid.innerHTML = hh + ':' + mm + ':' + ss;
      }

      // 检查每个输入框设置的值，超过60，则自动进1
      function checkTime(){
        if(ss>59){
          var s1 = parseInt(ss/60);
          ss %= 60;
          mm += s1;
          if(mm > 59){
            var m1 = parseInt(mm/60);
            hh += m1;
            mm %= 60;
          }
        }
        return hh,mm,ss;
      }
  </script>
</body>
</html>

转载于:https://my.oschina.net/mpf/blog/526888