Rumah > Artikel > hujung hadapan web > 利用JS实现一个可精确到10ms的秒表的制作（附代码）
利用JS实现一个可精确到10ms的秒表的制作（附代码）
- 不言asal
- 2018-08-07 11:44:452069semak imbas
本篇文章给大家带来的内容是关于利用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
<!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>
相关文章推荐：
Atas ialah kandungan terperinci 利用JS实现一个可精确到10ms的秒表的制作（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js如何获取文件上传进度？js获取文件上传进度的代码Artikel seterusnya：jQuery如何实现弹幕？jQuery实现弹幕效果的代码
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional