當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
教你用JS手写简单的秒表（精确到10ms，没有延迟）
生活随笔
收集整理的這篇文章主要介紹了
教你用JS手写简单的秒表（精确到10ms，没有延迟）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
制作秒表的思路如下：
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
<!Doctype html> <html><head><title>有延遲的秒表</title><style type="text/css"></style> </head><body><div id="div1"><span id="span10">0</span><span id="span11">0</span> :<span id="span20">0</span><span id="span21">0</span> :<span id="span30">0</span><span id="span31">0</span> :<span id="span40">0</span><span id="span41">0</span></div><input id="input1" type="button" value="start" onclick="whenClick();"><input id="input2" type="button" value="clear" onclick="clear1();"><script type="text/javascript">var milliSeconds1 = document.getElementById("span41");var milliSeconds0 = document.getElementById("span40");var seconds1 = document.getElementById("span31");var seconds0 = document.getElementById("span30");var minutes1 = document.getElementById("span21");var minutes0 = document.getElementById("span20");//前端全棧交流學習圈：866109386var hours1 = document.getElementById("span11"); //面相1-3年經驗前端開發人員var hours0 = document.getElementById("span10"); //幫助突破技術瓶頸，提升思維能力var flag;function whenClick(){// 開始/暫停var inputValue = document.getElementById("input1");if(inputValue.value=="start"||inputValue.value=="continue"){inputValue.value=" stop";start1();}else {inputValue.value="continue";stop1();}}function clear1(){// 清零stop1();milliSeconds1.innerHTML = milliSeconds0.innerHTML = seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;document.getElementById("input1").value = "start";}function start1(){// 開始/繼續flag = setInterval("timeIncrement();",10);}function timeIncrement(){milliSeconds1.innerHTML++;if(milliSeconds1.innerHTML>=10){milliSeconds1.innerHTML%=10;milliSeconds0.innerHTML++;if(milliSeconds0.innerHTML>=10){milliSeconds0.innerHTML%=10;seconds1.innerHTML++;if(seconds1.innerHTML>=10){seconds1.innerHTML%=10;seconds0.innerHTML++;if(seconds0.innerHTML>=6){seconds0.innerHTML%=6minutes1.innerHTML++;if(minutes1.innerHTML>=10){minutes1.innerHTML%=10;minutes0.innerHTML++;if(minutes0.innerHTML>=6){minute0.innerHTML%=6;hours1.innerHTML++;if(hours1.innerHTML>=10){hours1.innerHTML%=10;hours0.innerHTML++;}}}}}}}}function stop1(){// 暫停/停止clearInterval(flag);}</script></body> </html> 復制代碼###代碼B
<!Doctype html> <html><head><title>仍然有延遲的秒表</title><style type="text/css"></style> </head><body><div id="div1"><span id="span1">00</span> :<span id="span2">00</span> :<span id="span3">00</span> :<span id="span4">00</span></div><input id="input1" type="button" value="start" onclick="whenClick();"><input id="input2" type="button" value="clear" onclick="clear1();"><script type="text/javascript">var milliSeconds1 = document.getElementById("span4");var seconds1 = document.getElementById("span3");var minutes1 = document.getElementById("span2");var hours1 = document.getElementById("span1");var time = 0;var flag;function whenClick(){// 開始/暫停var inputValue = document.getElementById("input1");if(inputValue.value=="start"||inputValue.value=="continue"){inputValue.value=" stop";start1();}else {inputValue.value="continue";stop1();//前端全棧交流學習圈：866109386}//面相1-3年經驗前端開發人員}//幫助突破技術瓶頸，提升思維能力function clear1(){// 清零stop1();milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";time=0;document.getElementById("input1").value = "start";}function start1(){// 開始/繼續flag = setInterval("timeIncrement();",10);}function timeIncrement(){time++;var a=time%100;var b=time%6000/100;var c=time%360000/6000;var d=time%8640000/360000;milliSeconds1.innerHTML=(a<10)?('0'+a):a;seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));}function stop1(){// 暫停/停止clearInterval(flag);}</script></body> </html> 復制代碼###C代碼
<!Doctype html> <html><head><title>秒表</title><style type="text/css"></style> </head><body><div id="div1"><span id="span1">00</span> :<span id="span2">00</span> :<span id="span3">00</span> :<span id="span4">00</span></div><input id="input1" type="button" value="start" onclick="whenClick();"><input id="input2" type="button" value="clear" onclick="clear1();"><script type="text/javascript">var milliSeconds1 = document.getElementById("span4");var seconds1 = document.getElementById("span3");var minutes1 = document.getElementById("span2");var hours1 = document.getElementById("span1");var time=0;var pre_time=0; //前端全棧交流學習圈：866109386var intervals=0;//面相1-3年經驗前端開發人員var pre_intervals=0;//幫助突破技術瓶頸，提升思維能力var flag;function whenClick(){// 開始/暫停var inputValue = document.getElementById("input1");if(inputValue.value=="start"||inputValue.value=="continue"){var date= new Date();time = date.getTime();pre_time=time;inputValue.value="stop ";start1();}else {inputValue.value="continue";stop1();}}function clear1(){// 清零stop1();milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";time=0;pre_time=0;intervals=0;pre_intervals=0;document.getElementById("input1").value = "start";}function start1(){// 開始/繼續flag = setInterval("timeIncrement();",10);}function timeIncrement(){date = new Date();intervals=date.getTime()-time+pre_intervals;var a=intervals%1000/10;var b=intervals%60000/1000;var c=intervals%3600000/60000;var d=intervals/3600000;milliSeconds1.innerHTML=(a<10)?('0'+Math.floor(a)):(Math.floor(a));seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));}function stop1(){// 暫停/停止date = new Date();pre_intervals += date.getTime()-pre_time;clearInterval(flag);}</script></body> </html> 復制代碼以上就是我本次想要分享的一些東西，如果有更好的方法歡迎大家留言討論。
總結
以上是生活随笔為你收集整理的教你用JS手写简单的秒表（精确到10ms，没有延迟）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： requests(一): 发送一个jso
- 下一篇： 爱玛士关于爬虫的scrapy框架的心得