教你用JS手写简单的秒表(精确到10ms,没有延迟)
制作秒表的思路如下:
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");//前端全栈交流学习圈:866109386var 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%=6minutes1.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; //前端全栈交流学习圈:866109386var 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>
复制代码
以上就是我本次想要分享的一些东西,如果有更好的方法欢迎大家留言讨论。
教你用JS手写简单的秒表(精确到10ms,没有延迟)相关推荐
- 用 Node.js 手写一个 DNS 服务器
DNS 是实现域名到 IP 转换的网络协议,当访问网页的时候,浏览器首先会通过 DNS 协议把域名转换为 IP,然后再向这个 IP 发送 HTTP 请求. DNS 是我们整天在用的协议,不知道大家是否 ...
- 致敬科比,JS 手写贪吃蛇
用 JS 手写贪吃蛇,致敬黑曼巴科比,实现功能有: 开始/暂停/继续游戏 简单/一般/困难选择 游戏积分榜 暗黑/紫金模式切换 在本场 Chat 中,会讲到如下内容: Bootstrap 组件使用 页 ...
- [js] 手写一个trim()的方法
[js] 手写一个trim()的方法 function trim(str) { if (str[0] === ' ' && str[str.length - 1] === ' ') { ...
- 2020年前端面试之JS手写代码题合集
2020年前端面试之JS手写代码题合集 预计会有上千道题,后续慢慢补! 1. 写一个把字符串大小写切换的方法 function caseConvert(str){return str.replace ...
- 手写简单的HashMap(jdk1.7)
手写简单的HashMap(jdk1.7) public class MyHashMap<K, V> { //创建一个节点数组 private Entry1<K, V>[] ta ...
- JS手写上传文件、React手写上传文件
目录 JS手写 React上传文件 JS手写 <!DOCTYPE html> <html lang="en"><head><meta ch ...
- 使用代理模式手写简单的数据库连接池
使用代理模式手写简单的数据库连接池 JDBC直连数据库 思考 改造 ConnectionProxy ConnectionPool ProxyMain 运行结果 代理模式 与装饰器的区别 JDBC直连数 ...
- 一文帮你搞定90%的JS手写题
还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题.在工作中还可以对常用的需求进行手写实现,比如深拷贝.防抖节流等可以直接用于往后的项目中,提高项目开发效率.不说废话了,下 ...
- Dubbo——手写简单版Dubbo框架
摘要 本博文将详细的介绍的一个手写简单版本的dubbo的实现. 项目架构原理图 项目源码实现 https://github.com/2462612540/DubboPrinciple/tree/mas ...
最新文章
- Specification使用notin
- 电子科大计算机学院硕士培养方案,电子科技大学制订全日制硕士专业学位研究生培养方案基本要求.doc...
- 二进制(bit)整数
- jwt 私钥_什么是 JSON Web Token(JWT)
- 访问修饰符作用范围由大到小是_9个java基础小知识
- 剑指offer python实现_剑指offer系列python实现 日更(三)
- 如果你想靠写作变现,一定要看看下面这3点
- android学习——popupWindow 在指定位置上的显示
- uni-app两种方法解决跨域问题【已验证】
- 逆向 Mac 应用 Bartender
- js:防抖动与节流【转载】
- 简历关于计算机办公软件怎么写,简历中怎么写办公软件
- python用的编程软件是什么,python编程软件用哪个好
- Windows聚焦问题修复
- 好玩的ios APP动动手指,轻松挣美金~~
- 原生js打印插件Print.js
- 第五章第三十五题(加法)(Summation)
- STM32F103C8T6 ADC输入电流电压特性
- 验证和确认的区别_验证与确认之间的区别
- C++数据结构之哈希表