本篇文章给大家带来的内容是关于利用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

有延迟的秒表

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);

}

代码2

仍然有延迟的秒表

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);

}

代码3(与时间同步的代码)

秒表

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);

}

相关文章推荐：