本篇文章给大家带来的内容是关于利用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>
代码2
<!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>
代码3（与时间同步的代码）
<!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的秒表的制作（附代码）的详细内容。