利用JS實現一個可精確到10ms的秒錶的製作（附程式碼）
- 不言原創
- 2018-08-07 11:44:452114瀏覽
這篇文章帶給大家的內容是關於利用JS實現一個可精確到10ms的秒錶的製作（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
這段時間剛接觸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/36000;
將方案A與B比較。由於A用了嵌套的形式來計算時間，在時間較短時，方案A判斷的次數較少，效率較高；而對於方案B來說，每次循環必然要經過四次計算，因此，在時間較短時， 效率甚至比A還低。
C . 為了與真實時間同步，不產生任何誤差，我又想到了另一種方式。在JS的Date物件裡面，有一個方法叫做 getTime()， 用來傳回 1970 年 1 月 1 日至今的毫秒數。點選start時，觸發 getTime() ，以此時間為基準，每十毫秒執行一次 getTime() ，讓後者減去前者得到相對時間。這樣一來，就完美解決了與真實時間同步的問題。
下面附上三段程式碼：
程式碼1
<!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");
var hours1 = document.getElementById("span11");
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%=6
minutes1.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>
#<!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();
}
}
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>
<!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;
var intervals=0;
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的秒錶的製作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！