<!--利用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
1 <!doctype html> 2 <html> 3 <head> 4 <title>有延迟的秒表</title> 5 <style type="text/css"></style> 6 </head> 7 <body> 8 <div id="div1"> 9 <span id="span10">0</span><span id="span11">0</span> : 10 <span id="span20">0</span><span id="span21">0</span> : 11 <span id="span30">0</span><span id="span31">0</span> : 12 <span id="span40">0</span><span id="span41">0</span> 13 </div> 14 <input id="input1" type="button" value="start" onclick="whenClick();"> 15 <input id="input2" type="button" value="clear" onclick="clear1();"> 16 <script type="text/javascript"> 17 var milliSeconds1 = document.getElementById("span41"); 18 var milliSeconds0 = document.getElementById("span40"); 19 var seconds1 = document.getElementById("span31"); 20 var seconds0 = document.getElementById("span30"); 21 var minutes1 = document.getElementById("span21"); 22 var minutes0 = document.getElementById("span20"); 23 var hours1 = document.getElementById("span11"); 24 var hours0 = document.getElementById("span10"); 25 var flag; 26 27 function whenClick(){// 开始/暂停 28 var inputValue = document.getElementById("input1"); 29 if(inputValue.value=="start"||inputValue.value=="continue"){ 30 inputValue.value=" stop"; 31 start1(); 32 } 33 else { 34 inputValue.value="continue"; 35 stop1(); 36 } 37 } 38 39 function clear1(){// 清零 40 stop1(); 41 milliSeconds1.innerHTML = milliSeconds0.innerHTML = 42 seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 43 minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0; 44 document.getElementById("input1").value = "start"; 45 } 46 47 function start1(){// 开始/继续 48 flag = setInterval("timeIncrement();",10); 49 } 50 51 function timeIncrement(){ 52 milliSeconds1.innerHTML++; 53 if(milliSeconds1.innerHTML>=10){ 54 milliSeconds1.innerHTML%=10; 55 milliSeconds0.innerHTML++; 56 if(milliSeconds0.innerHTML>=10){ 57 milliSeconds0.innerHTML%=10; 58 seconds1.innerHTML++; 59 if(seconds1.innerHTML>=10){ 60 seconds1.innerHTML%=10; 61 seconds0.innerHTML++; 62 if(seconds0.innerHTML>=6){ 63 seconds0.innerHTML%=6 64 minutes1.innerHTML++; 65 if(minutes1.innerHTML>=10){ 66 minutes1.innerHTML%=10; 67 minutes0.innerHTML++; 68 if(minutes0.innerHTML>=6){ 69 minute0.innerHTML%=6; 70 hours1.innerHTML++; 71 if(hours1.innerHTML>=10){ 72 hours1.innerHTML%=10; 73 hours0.innerHTML++; 74 } 75 } 76 } 77 } 78 } 79 } 80 } 81 } 82 83 function stop1(){// 暂停/停止 84 clearInterval(flag); 85 } 86 87 </script> 88 </body> 89 </html>
代码B
1 <!doctype html> 2 <html> 3 <head> 4 <title>仍然有延迟的秒表</title> 5 <style type="text/css"></style> 6 </head> 7 <body> 8 <div id="div1"> 9 <span id="span1">00</span> : 10 <span id="span2">00</span> : 11 <span id="span3">00</span> : 12 <span id="span4">00</span> 13 </div> 14 <input id="input1" type="button" value="start" onclick="whenClick();"> 15 <input id="input2" type="button" value="clear" onclick="clear1();"> 16 <script type="text/javascript"> 17 var milliSeconds1 = document.getElementById("span4"); 18 var seconds1 = document.getElementById("span3"); 19 var minutes1 = document.getElementById("span2"); 20 var hours1 = document.getElementById("span1"); 21 var time = 0; 22 var flag; 23 24 function whenClick(){// 开始/暂停 25 var inputValue = document.getElementById("input1"); 26 if(inputValue.value=="start"||inputValue.value=="continue"){ 27 inputValue.value=" stop"; 28 start1(); 29 } 30 else { 31 inputValue.value="continue"; 32 stop1(); 33 } 34 } 35 36 function clear1(){// 清零 37 stop1(); 38 milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00"; 39 time=0; 40 document.getElementById("input1").value = "start"; 41 } 42 43 function start1(){// 开始/继续 44 flag = setInterval("timeIncrement();",10); 45 } 46 47 function timeIncrement(){ 48 time++; 49 var a=time%100; 50 var b=time%6000/100; 51 var c=time%360000/6000; 52 var d=time%8640000/360000; 53 milliSeconds1.innerHTML=(a<10)?('0'+a):a; 54 seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b)); 55 minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c)); 56 hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d)); 57 } 58 59 function stop1(){// 暂停/停止 60 clearInterval(flag); 61 } 62 63 </script> 64 </body> 65 </html>
代码C（与时间同步的代码）
1 <!doctype html> 2 <html> 3 <head> 4 <title>秒表</title> 5 <style type="text/css"></style> 6 </head> 7 <body> 8 <div id="div1"> 9 <span id="span1">00</span> : 10 <span id="span2">00</span> : 11 <span id="span3">00</span> : 12 <span id="span4">00</span> 13 </div> 14 <input id="input1" type="button" value="start" onclick="whenClick();"> 15 <input id="input2" type="button" value="clear" onclick="clear1();"> 16 <script type="text/javascript"> 17 var milliSeconds1 = document.getElementById("span4"); 18 var seconds1 = document.getElementById("span3"); 19 var minutes1 = document.getElementById("span2"); 20 var hours1 = document.getElementById("span1"); 21 var time=0; 22 var pre_time=0; 23 var intervals=0; 24 var pre_intervals=0; 25 var flag; 26 27 function whenClick(){// 开始/暂停 28 var inputValue = document.getElementById("input1"); 29 if(inputValue.value=="start"||inputValue.value=="continue"){ 30 var date= new Date(); 31 time = date.getTime(); 32 pre_time=time; 33 inputValue.value="stop "; 34 start1(); 35 } 36 else { 37 inputValue.value="continue"; 38 stop1(); 39 } 40 } 41 42 function clear1(){// 清零 43 stop1(); 44 milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00"; 45 time=0; 46 pre_time=0; 47 intervals=0; 48 pre_intervals=0; 49 document.getElementById("input1").value = "start"; 50 } 51 52 function start1(){// 开始/继续 53 flag = setInterval("timeIncrement();",10); 54 } 55 56 function timeIncrement(){ 57 date = new Date(); 58 intervals=date.getTime()-time+pre_intervals; 59 var a=intervals%1000/10; 60 var b=intervals%60000/1000; 61 var c=intervals%3600000/60000; 62 var d=intervals/3600000; 63 milliSeconds1.innerHTML=(a<10)?('0'+Math.floor(a)):(Math.floor(a)); 64 seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b)); 65 minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c)); 66 hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d)); 67 } 68 69 function stop1(){// 暂停/停止 70 date = new Date(); 71 pre_intervals += date.getTime()-pre_time; 72 clearInterval(flag); 73 } 74 75 </script> 76 </body> 77 </html>
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
