时间:2021-07-01 10:21:17 帮助过:130人阅读
这段时间刚接触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的秒表的制作(附代码)的详细内容,更多请关注Gxl网其它相关文章!