ホームページ > 記事 > ウェブフロントエンド > JS を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)
JS を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)
- 不言オリジナル
- 2018-08-07 11:44:452118ブラウズ
この記事の内容は、JS を使用して 10ms まで正確なストップウォッチを実現することです (コード付き)。必要な友人は参考にしていただければ幸いです。 。
この時期に js に触れたばかりなので、学んだ知識を使って簡単なストップウォッチを作りたいと思っています。
ストップウォッチの作り方は次のとおりです:
1. まず機能とインターフェースを決定します。
私の目的は最も単純なストップウォッチを作成することなので、開始、終了、リセット機能のみが必要です。インターフェイスは以下のとおりです。 実行が開始されていません:
var a=time%100; var b=time%6000/100; var c=time%360000/6000; var d=time%8640000/36000;解決策 A と B を比較します。 A では入れ子形式で時間を計算するため、時間が短い場合はプラン A の方が判断が少なく効率的ですが、プラン B では各サイクルで 4 回の計算が必要となるため、時間が短い場合は効率が高くなります。 Aよりもさらに低いです。
C . 誤差なくリアルタイムに同期するために、別の方法を考えました。 JS Date オブジェクトには、getTime() というメソッドがあり、1970 年 1 月 1 日から現在までのミリ秒数を返すために使用されます。 start をクリックすると getTime() がトリガーされ、この時間を基準として getTime() が 10 ミリ秒ごとに実行され、前者から後者が減算されて相対時間が取得されます。このようにして、リアルタイムとの同期の問題は完全に解決されます。 以下の 3 つのコードを添付します:
コード 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 を使用して 10 ミリ秒の精度のストップウォッチを作成します (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。