计时器

计时器一：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             #div1{ 150px; height: 150px; border: 1px solid black; background-color: orange; margin: 100px auto; text-align: center; padding: 50px}
 8             #div1 span{font-size: 30px;}
 9             #div1 button{margin-top: 10px;  150px; height: 30px; font-size: 18px; background-color: black; color: white}
10         </style>
11         <script>
12             window.onload = function(){
13                 var oStart = $("start");
14                 var oPause = $("pause");
15                 var oReset = $("reset");
16 
17                 var oHour = $("hour");
18                 var oMin = $("min");
19                 var oSec = $("sec");
20 
21 
22                 var i = 0; //设置总秒数
23                 var timer = null; //如果要跨函数使用，该变量作用域必须大
24                 //1、给开始按钮添加点击事件
25                 oStart.onclick = function(){
26                     timer = setInterval(function(){
27                         i++;
28                         oSec.innerHTML = doublueNum(i % 60);
29                         oMin.innerHTML = doublueNum(parseInt(i / 60) % 60);
30                         oHour.innerHTML = doublueNum(parseInt(i / 3600));
31                     }, 1000);
32                 }
33 
34 
35                 //2、暂停
36                 oPause.onclick = function(){
37                     clearInterval(timer);
38                 }
39 
40                 //3、复位
41                 oReset.onclick = function(){
42                     clearInterval(timer);
43                     //<1>总秒数情况
44                     i = 0;
45                     //<2>页面显示内容情况
46                     oSec.innerHTML = "00";
47                     oMin.innerHTML = "00";
48                     oHour.innerHTML = "00";
49                 }
50 
51 
52             }
53 
54             //将单位数变成两位数
55             function doublueNum(num){
56                 if(num < 10){
57                     return "0" + num;
58                 }else{
59                     return num;
60                 }
61             }
62 
63             function $(id){
64                 return document.getElementById(id);
65             }
66         </script>
67     </head>
68     <body>
69         <div id = 'div1'>
70             <span id = 'hour'>00</span>
71             <span>:</span>
72             <span id = 'min'>00</span>
73             <span>:</span>
74             <span id = 'sec'>00</span><br/>
75             <button id = 'start'>开始</button> <br>
76             <button id = 'pause'>暂停</button> <br>
77             <button id = 'reset'>复位</button>
78         </div>
79     </body>
80 </html>

效果：

效果刚开始是正常的，如果一直点开始的话计数就会变快。因为每次点击开始，都会在程序里开一个setInterval计时器。所以会加快计数。

解决上面的bug

 1     <script>
 2 
 3         window.onload = function(){
 4             var oStart = $('start');
 5             var oPause = $('pause');
 6             var oReset = $('reset');
 7 
 8             var oSec = $('sec');
 9             var oMin = $('min');
10             var oHour = $('hour');
11 
12             var i = 0;//计算总秒数
13             var timer = null;
14             var isRun = false;//用于标识计时器是否在运行
15             //开始
16             oStart.onclick = function(){
17                 if(!isRun){
18                     timer = setInterval(function(){
19                         i++;
20                         oSec.innerHTML = doubleNum(i % 60);
21                         oMin.innerHTML = doubleNum(parseInt(i / 60) % 60);
22                         oHour.innerHTML = doubleNum(parseInt(i / 3600));
23                         isRun = true;    //说明计时器在运行，以后在点开始没用了。                
24                     },1000);
25                 }
26 
27             }
28 
29             //暂停
30             oPause.onclick = function(){
31                 clearInterval(timer);
32                 isRun = false;// 标示计时器不在运行了,方便下次点开始时有效计数
33 
34             }
35 
36             //复位
37             oReset.onclick = function(){
38                 clearInterval(timer);
39                 i = 0;
40                 oSec.innerHTML = '00';
41                 oMin.innerHTML = '00';
42                 oHour.innerHTML = '00';
43                 isRun = false;// 标示计时器不在运行了,方便下次点开始时有效计数
44             }
45         }
46 
47         //一位数转两位数
48         function doubleNum(num){
49             if(num < 10){
50                 return '0' + num;
51             }else{
52                 return num;
53             }
54         }
55 
56 
57         //封装获取文档节点的函数,简化代码
58         function $(id){
59             return document.getElementById(id);
60         }
61     </script>

效果：

可见bug已经解决，在运行过程中点开始，不会对时间产生影响。

计时器二（一按键双功能）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>计时器2-多功能开始按钮</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11         #timer {
 12             margin: 50px auto;
 13              200px;
 14             height: 180px;
 15             padding-top: 20px;
 16             font-size: 30px;
 17             text-align: center;
 18             background: cyan;
 19         }
 20 
 21         #timer button {
 22              100px;
 23         }
 24 
 25     </style>
 26     <script>
 27 
 28         window.onload = function(){
 29             var oStart = $('start');
 30 //            var oPause = $('pause');
 31             var oReset = $('reset');
 32 
 33             var oSec = $('sec');
 34             var oMin = $('min');
 35             var oHour = $('hour');
 36 
 37             var i = 0;//计算总秒数
 38             var timer = null;
 39             //开始 暂停 一体
 40             var isRuning = false;
 41             oStart.onclick = function(){
 42                 if(!isRuning){
 43                     oStart.innerHTML = '暂停';
 44                     isRuning = true;
 45 
 46                     timer = setInterval(function(){
 47                         i++;
 48                         oSec.innerHTML = doubleNum(i % 60);
 49                         oMin.innerHTML = doubleNum(parseInt(i / 60) % 60);
 50                         oHour.innerHTML = doubleNum(parseInt(i / 3600));
 51                     },1000);
 52 
 53 
 54                 }else{
 55                     oStart.innerHTML = '开始';
 56                     isRuning = false;
 57 
 58                     clearInterval(timer);
 59                 }
 60             }
 61 
 62             //复位
 63             oReset.onclick = function(){
 64                 clearInterval(timer);
 65                 i = 0;
 66                 oSec.innerHTML = '00';
 67                 oMin.innerHTML = '00';
 68                 oHour.innerHTML = '00';
 69                 oStart.innerHTML = '开始';
 70                 isRuning = false;
 71             }
 72         }
 73 
 74         //一位数转两位数
 75         function doubleNum(num){
 76             if(num < 10){
 77                 return '0' + num;
 78             }else{
 79                 return num;
 80             }
 81         }
 82 
 83 
 84         //封装获取文档节点的函数,简化代码
 85         function $(id){
 86             return document.getElementById(id);
 87         }
 88     </script>
 89 </head>
 90 <body>
 91     <div id="timer">
 92         <span id="hour">00</span>
 93         <span>:</span>
 94         <span id="min">00</span>
 95         <span>:</span>
 96         <span id="sec">00</span>
 97         <button id="start">开始</button><br>
 98         <button id="reset">复位</button>
 99     </div>
100 </body>
101 </html>

效果:

我们再把上面能封装的函数，封装一下。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             #div1{ 150px; height: 150px; border: 1px solid black; background-color: cyan; margin: 100px auto; text-align: center; padding: 50px}
 8             #div1 span{font-size: 30px;}
 9             #div1 button{margin-top: 10px;  150px; height: 30px; font-size: 18px; }
10         </style>
11         <script>
12             window.onload = function(){
13                 var oBtn = $("btn1");
14                 var oReset = $("reset");
15 
16                 var oHour = $("hour");
17                 var oMin = $("min");
18                 var oSec = $("sec");
19 
20 
21                 var i = 0; //设置总秒数
22                 var timer = null; //如果要跨函数使用，该变量作用域必须大
23                 //1、开始计时
24                 function startFunc(){
25                     timer = setInterval(function(){
26                         i++;
27                         oSec.innerHTML = doublueNum(i % 60);
28                         oMin.innerHTML = doublueNum(parseInt(i / 60) % 60);
29                         oHour.innerHTML = doublueNum(parseInt(i / 3600));
30                     }, 1000);
31                 }
32 
33 
34                 //2、暂停计时
35                 function pauseFunc(){
36                     clearInterval(timer);
37                 }
38 
39 
40                 var isrunning = false; //假设计时器不运行
41                 oBtn.onclick = function(){
42                     if(!isrunning){
43                         oBtn.innerHTML = "暂停";
44                         isrunning = true;
45                         startFunc();
46                     }else{
47                         oBtn.innerHTML = "开始";
48                         isrunning = false;
49                         pauseFunc();
50                     }
51                 }
52 
53 
54                 //3、复位
55                 oReset.onclick = function(){
56                     clearInterval(timer);
57                     //<1>总秒数情况
58                     i = 0;
59                     //<2>页面显示内容情况
60                     oSec.innerHTML = "00";
61                     oMin.innerHTML = "00";
62                     oHour.innerHTML = "00";
63 
64                     //<3>将按钮文字改成开始
65                     oBtn.innerHTML = '开始';
66                     //<4>将isrunning设置成false
67                     isrunning = false;
68                 }
69 
70 
71             }
72 
73             //将单位数变成两位数
74             function doublueNum(num){
75                 if(num < 10){
76                     return "0" + num;
77                 }else{
78                     return num;
79                 }
80             }
81 
82             function $(id){
83                 return document.getElementById(id);
84             }
85         </script>
86     </head>
87     <body>
88         <div id = 'div1'>
89             <span id = 'hour'>00</span>
90             <span>:</span>
91             <span id = 'min'>00</span>
92             <span>:</span>
93             <span id = 'sec'>00</span><br/>
94             <button id = 'btn1'>开始</button> <br>
95             <button id = 'reset'>复位</button>
96         </div>
97     </body>
98 </html>

效果和上面的一样。