JS之簡單計時器的製作（精確到10ms）

這段時間剛接觸js，想利用所學的知識自製一款簡單的計時器。製作計時器的思路如下： 1、首先定出功能以及界面。我的目的是做最簡單的計時器，因此只需要開始、結束以及清零的功能。界面如下圖所示：未開始運行：運行中： 2、構思實現 ...

這段時間剛接觸js，想利用所學的知識自製一款簡單的秒錶。

製作秒錶的思路如下：

1、首先定出功能以及界面。

我的目的是做最簡單的秒錶，因此只需要開始、結束以及清零的功能。界面如下圖所示：

未開始運行：

運行中：　　

2、構思實現的方式。

首先，核心方法肯定是 setInterval() 方法，用於周期性地顯示時間。因為我要精確到10ms，所以設置時間間隔為10。

再者，如何令時間遞增？

A . 我開始想到的是設置變數 milliSeconds、seconds、minutes 以及 hours 。milliSeconds每10ms遞增1，當 milliSeconds >= 100 時，用milliSeconds模100，同時seconds增1 。同理，seconds 滿60時 minutes 遞增1 ，minutes 滿 60 時 hours 遞增1。

但是，為了保證格式的統一性（我想要顯示 02:01:24:06，而不是顯示 2:1:24:6），於是又將四個變數變為8個變數，思想同上。（代碼參見本頁最後 “有延時的秒錶”）。

不過，在運行的時候出現了延遲問題，並且該延遲還會進行累加。在時間較短時還能比較準確地運行，時間一長，秒錶上的時間就會和標準時間誤差比較大。

B . 為了讓延遲減小，我又設計了另外一種方法（實際上這種方法延遲比上一種更高）。此時只用一個time變數，來記錄觸發 start 按鈕以後所經過的毫秒數(time以10ms為單位，下麵的a/b/c/d表示毫秒（10ms）、秒、分、時)。為了追求格式的統一性，我加入了 if 語句，當a/b/c/d小於10時，前面添加 0 占位。

                var a=time%100;
               var b=time%6000/100;
               var c=time%360000/6000;
               var d=time%8640000/360000;

將方案A與B比較。由於A用了嵌套的形式來計算時間，在時間較短時，方案A判斷的次數較少，效率較高；而對於方案B來說，每次迴圈必然要經過四次計算，因此，在時間較短時，效率甚至比A還低。

C . 為了與真實時間同步，不產生任何誤差，我又想到了另一種方式。在JS的Date對象裡面，有一個方法叫做 getTime()，用於返回 1970 年 1 月 1 日至今的毫秒數。在點擊start時，觸發 getTime() ，以此時間作為基準，每十毫秒執行一次 getTime() ，讓後者減去前者得到相對時間。這樣一來，就完美解決了與真實時間同步的問題。

下麵附上三段代碼：

代碼A

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>有延遲的秒錶</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             <span id="span10">0</span><span id="span11">0</span> :
10             <span id="span20">0</span><span id="span21">0</span> :
11             <span id="span30">0</span><span id="span31">0</span> :
12             <span id="span40">0</span><span id="span41">0</span>
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span41");
18             var milliSeconds0 = document.getElementById("span40");
19             var seconds1 = document.getElementById("span31");
20             var seconds0 = document.getElementById("span30");
21             var minutes1 = document.getElementById("span21");
22             var minutes0 = document.getElementById("span20");
23             var hours1 = document.getElementById("span11");
24             var hours0 = document.getElementById("span10");
25             var flag;
26 
27             function whenClick(){//  開始/暫停
28                 var inputValue = document.getElementById("input1");
29                 if(inputValue.value=="start"||inputValue.value=="continue"){
30                     inputValue.value=" stop";
31                     start1();
32                 }
33                 else {
34                     inputValue.value="continue";
35                     stop1();
36                 }
37             }
38             
39             function clear1(){//  清零
40                 stop1();
41                 milliSeconds1.innerHTML = milliSeconds0.innerHTML = 
42                 seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 
43                 minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;
44                 document.getElementById("input1").value = "start";
45             }
46 
47             function start1(){//  開始/繼續
48                 flag = setInterval("timeIncrement();",10);
49             }
50 
51             function timeIncrement(){
52                 milliSeconds1.innerHTML++;
53                 if(milliSeconds1.innerHTML>=10){
54                     milliSeconds1.innerHTML%=10;
55                     milliSeconds0.innerHTML++;
56                     if(milliSeconds0.innerHTML>=10){
57                         milliSeconds0.innerHTML%=10;
58                         seconds1.innerHTML++;
59                         if(seconds1.innerHTML>=10){
60                             seconds1.innerHTML%=10;
61                             seconds0.innerHTML++;
62                             if(seconds0.innerHTML>=6){
63                                 seconds0.innerHTML%=6
64                                 minutes1.innerHTML++;
65                                 if(minutes1.innerHTML>=10){
66                                     minutes1.innerHTML%=10;
67                                     minutes0.innerHTML++;
68                                     if(minutes0.innerHTML>=6){
69                                         minute0.innerHTML%=6;
70                                         hours1.innerHTML++;
71                                         if(hours1.innerHTML>=10){
72                                             hours1.innerHTML%=10;
73                                             hours0.innerHTML++;
74                                         }
75                                     }
76                                 }
77                             }
78                         }
79                     }
80                 }
81             }
82 
83             function stop1(){//  暫停/停止
84                 clearInterval(flag);
85             }
86 
87         </script>
88     </body>
89 </html>

代碼B

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>仍然有延遲的秒錶</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             <span id="span1">00</span> :
10             <span id="span2">00</span> :
11             <span id="span3">00</span> :
12             <span id="span4">00</span>
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span4");
18             var seconds1 = document.getElementById("span3");
19             var minutes1 = document.getElementById("span2");
20             var hours1 = document.getElementById("span1");
21             var time = 0;
22             var flag;
23 
24             function whenClick(){//  開始/暫停
25                 var inputValue = document.getElementById("input1");
26                 if(inputValue.value=="start"||inputValue.value=="continue"){
27                     inputValue.value=" stop";
28                     start1();
29                 }
30                 else {
31                     inputValue.value="continue";
32                     stop1();
33                 }
34             }
35             
36             function clear1(){//  清零
37                 stop1();
38                 milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
39                 time=0;
40                 document.getElementById("input1").value = "start";
41             }
42 
43             function start1(){//  開始/繼續
44                 flag = setInterval("timeIncrement();",10);
45             }
46 
47             function timeIncrement(){
48                 time++;
49                 var a=time%100;
50                 var b=time%6000/100;
51                 var c=time%360000/6000;
52                 var d=time%8640000/360000;
53                 milliSeconds1.innerHTML=(a<10)?('0'+a):a;
54                 seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
55                 minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
56                 hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
57             }
58 
59             function stop1(){//  暫停/停止
60                 clearInterval(flag);
61             }
62 
63         </script>
64     </body>
65 </html>

代碼C（與時間同步的代碼）

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>秒錶</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             <span id="span1">00</span> :
10             <span id="span2">00</span> :
11             <span id="span3">00</span> :
12             <span id="span4">00</span>
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span4");
18             var seconds1 = document.getElementById("span3");
19             var minutes1 = document.getElementById("span2");
20             var hours1 = document.getElementById("span1");
21             var time=0;
22             var pre_time=0;
23             var intervals=0;
24             var pre_intervals=0;
25             var flag;
26 
27             function whenClick(){//  開始/暫停
28                 var inputValue = document.getElementById("