教你用JS手写简单的秒表（精确到10ms，没有延迟）

程序汪布丁 05-27 333

前言：

目前兄弟们对“js时间转化为秒”大致比较关注，大家都想要了解一些“js时间转化为秒”的相关知识。那么小编在网络上汇集了一些关于“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

<!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");//前端全栈交流学习圈：866109386 var 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%=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>

代码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; //前端全栈交流学习圈：866109386 var 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>

以上就是我本次想要分享的一些东西，如果有更好的方法欢迎大家留言讨论。

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

本文地址：http://www.longkongtuishu.com/ca43bDWsBB1E.html

标签： #js时间转化为秒