JavaScript设置倒计时效果

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>倒计时效果</title>
6</head>
7<body>
8  <form name="myForm">
9    <input type="text" name="h" size="6" />时
10    <input type="text" name="m" size="6" />分
11    <input type="text" name="s" size="6" />秒
12  </form>
13  <button onclick="doStart();">开始</button>
14  <button onclick="doStop();">暂停</button>
15  <button onclick="doGoOn();">继续</button>
16  <h3 id="hid">0:0:0</h3>
17  <script type="text/javascript">
18      var hid = document.getElementById("hid");
19      var hh = 0,mm = 0,ss = 0;
20      var id = null;
21
22      // 开始倒计时
23      function doStart(){
24        hh = isNaN(parseInt(document.myForm.h.value)) ? 0 : parseInt(document.myForm.h.value);
25        mm = isNaN(parseInt(document.myForm.m.value)) ? 0 : parseInt(document.myForm.m.value);
26        ss = isNaN(parseInt(document.myForm.s.value)) ? 0 : parseInt(document.myForm.s.value);
27        if(id == null){ // 禁止多次点击产生计时效果出问题
28          id = setInterval("myTime()",1000);
29        }
30      }
31
32      // 暂停倒计时
33      function doStop(){
34        if(id != null){// 禁止多次点击产生计时效果出问题
35          clearInterval(id);
36        }
37      }
38
39      // 继续倒计时，只有在停止倒计时的情况下开始
40      function doGoOn(){
41        if(id != null){// 禁止多次点击产生计时效果出问题
42          id = setInterval("myTime()",1000);
43        }
44      }
45
46      // 运行倒计时
47      function myTime(){
48        checkTime();
49        ss--; // 秒数减一
50        if(ss < 0){
51          ss = 59;
52          mm--;
53          if(mm < 0){
54            mm = 59;
55            hh--;
56            if(hh < 0){
57              alert('时间到');
58              clearInterval(id);
59              return;
60            }
61          }
62        }
63        // 写入hid
64        hid.innerHTML = hh + ':' + mm + ':' + ss;
65      }
66
67      // 检查每个输入框设置的值，超过60，则自动进1
68      function checkTime(){
69        if(ss>59){
70          var s1 = parseInt(ss/60);
71          ss %= 60;
72          mm += s1;
73          if(mm > 59){
74            var m1 = parseInt(mm/60);
75            hh += m1;
76            mm %= 60;
77          }
78        }
79        return hh,mm,ss;
80      }
81  </script>
82</body>
83</html>

JavaScript设置倒计时效果

评论区

相关推荐