文档章节

JS之简单秒表的制作(精确到10ms,且没有延迟)

o
 osc_4nmshwhm
发布于 2018/08/06 23:18
字数 1651
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!--利用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>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

2020最新微信域名防封技术 微信域名防封系统是如何操作的

相信很多朋友在运营自己产品的网站或者是推广链接的时候,经常会发现运行的好好的网站链接突然就被封了,有一部分因为可能是网站的内容触犯了微信的规则,但是还有很大的一部分被同行恶意投诉...

戚馨逸
26分钟前
11
0
mysql 为什么 SQL 语句不要过多的 join?

第一部分 Linux上查看内存的使用情况该用什么命令 free -mh 可以看到内存或者缓存情况 total 总内存 used 已用内存 free 空闲内存 buff/cache 已使用的缓存 avaiable 可用内存 怎么清理已使...

edison_kwok
26分钟前
17
0
芒果TV的金融野心从未停止

来源|WEMONEY研究室 作者|林小林 芒果TV是真的会讲故事,《乘风破浪的姐姐》不仅是生活的故事更是资本的故事,30位姐姐让一款节目累计播放量飙升10亿,同时让背后的上市公司芒果超媒市值站...

镭射财经
38分钟前
4
0
找到的程序集的清单定义与程序集引用不匹配

问题: I am trying to run some unit tests in a C# Windows Forms application (Visual Studio 2005), and I get the following error: 我试图在C#Windows窗体应用程序(Visual Studio 2......

法国红酒甜
39分钟前
16
0
渗透测试的概念和实战

目录 1. 前言 2. 常见web安全漏洞 3. 思路 3.1渗透测试思路 3.2黑客攻击思路 4. 暴力破解 4.1谷歌黑语法 4.1.1 黑语法inurl:搜索url包含指定字符串 4.1.2 黑语法intitle:搜索网页中的标题名...

六道木
54分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部