【JS】JavascriptのsetInterval()を使ってストップウォッチを作ってみる
2018/09/08
一定時間ごとに処理を行う、JavascriptのsetInterval関数を使ったストップウォッチを作ってみましたので、その備忘録を兼ねたポストです。
一定時間ごとに処理を行う
処理を繰り返す setTimeout() / setInterval()
一定時間ごと処理を行うには setTimeout() または setInterval() を使います。
setTimeout() は、設定した処理を指定した時間後に一度だけ行います。
setInterval() は、設定した処理を時間ごとに何度でも繰り返し実行します。
最初の引数は処理命令を指定し、複雑な処理を行いたい場合には関数名を指定します。
二番目の引数はミリ秒となり、1秒が1000ミリ秒となります。
setTimeout()、setInterval() の戻り値はタイマーIDとなります。タイマーを停止させるには、戻り値であるタイマーIDを指定します。
リファレンス
- setTimeout(処理命令, ミリ秒);
戻り値：タイマーID - setInterval(処理命令, ミリ秒);
戻り値：タイマーID
タイマーをクリアする clearTimeout() / clearInterval()
タイマーをクリアするには clearTimeout() またはclearInterval() を使います。
clearTimeout() は setTimeout() のタイマーをクリアします。
clearInterval() は setInterval() のタイマーをクリアします。
タイマーIDは setTimeout()、setInterval() でタイマー設定した際に返される値になります。
リファレンス
- clearTimeout(クリアするタイマーID);
- clearInterval(クリアするタイマーID);
まとめ
| 関数 | 処理内容 | クリア関数 |
|---|---|---|
| setTimeout() | 処理を指定した時間後に一度だけ行う | clearTimeout() |
| setInterval() | 処理を処理を時間ごとに何度でも繰り返す | clearInterval() |
ストップウォッチを作る
デモ
https://lightning-bolt.xyz/js/jquery.tgCountupTimer/
ストップウォッチ
仕様
Start、Stop、Restart、Clearのボタンで制御。
最初はStartボタン以外をdisabledとし、Startクリック後に、Stopをアクティブに、Startをdisabledにする。
Stopクリック後にRestartとClearをアクティブに、Stopをdisabledにする。
Restartクリック後、Stopをアクティブに、Restartをdisabledにする。
Clearクリック後はStartをアクティブに、Clearをdisabledにする。
カウントはミリ秒刻みとする。
jQuery必須。
操作ボタン
|
1 2 3 4 5 6 7 8 9 |
<div id="tgCountupTimer"> <p class="time">00:00:00:0</p> <form> <input type="button" value="Start" id="startButton"> <input type="button" value="Stop" id="stopButton" disabled> <input type="button" value="Restart" id="restartButton" disabled> <input type="button" value="Clear" id="clearButton" disabled> </form> </div> |
スクリプト
ちと長いですが、全文載っけます。
前半がボタン制御、後半がカウントアップのスクリプトとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<script> $(function() { // スタートボタン $('#tgCountupTimer #startButton').click(function() { // 00:00:00:0からスタート $('#tgCountupTimer .time').html('00:00:00:0'); timer = setInterval("countUp()", 100); $(this).attr('disabled', 'disabled'); $('#tgCountupTimer #stopButton').removeAttr('disabled'); }); // ストップボタン $('#tgCountupTimer #stopButton').click(function() { // (一時)停止 clearInterval(timer); $(this).attr('disabled', 'disabled'); $('#tgCountupTimer #restartButton').removeAttr('disabled'); $('#tgCountupTimer #clearButton').removeAttr('disabled'); }); // リスタートボタン $('#tgCountupTimer #restartButton').click(function() { timer = setInterval("countUp()", 100); $(this).attr('disabled', 'disabled'); $('#tgCountupTimer #stopButton').removeAttr('disabled'); $('#tgCountupTimer #clearButton').attr('disabled','disabled'); }); // クリアボタン $('#tgCountupTimer #clearButton').click(function() { msec = 0; sec = 0; min = 0; hour = 0; // 00:00:00:0にリセット $('#tgCountupTimer .time').html('00:00:00:0'); clearInterval(timer); $(this).attr('disabled', 'disabled'); $('#tgCountupTimer #stopButton').attr('disabled','disabled'); $('#tgCountupTimer #restartButton').attr('disabled','disabled'); $('#tgCountupTimer #startButton').removeAttr('disabled'); }); }); msec = 0; sec = 0; min = 0; hour = 0; function countUp () { msec += 1; if (msec > 9) { msec = 0; sec += 1; } if (sec > 59) { sec = 0; min += 1; } if (min > 59) { min = 0; hour += 1; } // ミリ秒 msecNumber = msec; // 秒 if (sec < 10) { secNumber = '0' + sec.toString(); } else { secNumber = sec; } // 分 if (min < 10) { minNumber = '0' + min.toString(); } else { minNumber = min; } // 時 if (hour < 10) { hourNumber = '0' + hour.toString(); } else { hourNumber = hour; } // 出力 $('#tgCountupTimer .time').html(hourNumber + ':' + minNumber + ':' + secNumber + ':' + msecNumber); } </script> |
思ったよりか、単純な作りです。
繰り返し処理なので、setInterval() を使っています。
なかなか使い勝手が良いスクリプトですね。