LogoMark.png

JavaScript/Timer の変更点


#author("2020-02-02T17:41:23+09:00;2019-12-25T13:27:32+09:00","default:inoue.ko","inoue.ko")
*JavaScript|Timer
HTML + CSS + JavaScriptによる簡易ストップウォッチの紹介です。
~

***サンプル [[→ DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_Timer/]]

''index.html'' | ページの文書構造

 <!DOCTYPE html>
 <html lang ="ja">
     <head>
         <meta charset="UTF-8">
         <link rel="stylesheet" type="text/css" href="style.css">
         <script type="text/javascript" src="sample.js"></script>
         <title>STOPWATCH</title>
     </head>
     <body>
         <div id="time">0.00</div>
         <button id="start">START</button>
         <button id="stop">STOP</button>
         <button id="reset">RESET</button>
     </body>
 </html>

~

''style.css'' | ページのビジュアル

 body{
     text-align: center;
 }
 #time{
     font-size: 72px;
 }
~

''sample.js'' | ページのふるまい

 var timerId, startTime, elapsedTime = 0;
 var startBtn, stopBtn, resetBtn, timeDisplay;
 
 window.onload = function(){
     startBtn = document.getElementById('start');
     stopBtn = document.getElementById('stop');
     resetBtn = document.getElementById('reset');
     timeDisplay = document.getElementById('time');
     startBtn.addEventListener("click",startTimer);
     stopBtn.addEventListener("click",stopTimer);
     resetBtn.addEventListener("click",resetTimer);
     setBtnState(true,false,false);
 }
 
 function startTimer() {
     setBtnState(false,true,false);
     startTime = Date.now();
     timerId = setInterval(update,10);
 }
 
     function update(){
          var t = Date.now() - startTime + elapsedTime;
          timeDisplay.innerHTML = (t/1000).toFixed(2);
     }
 
 function stopTimer(){
     setBtnState(true,false,true);
     elapsedTime = Date.now() - startTime + elapsedTime;
     clearInterval(timerId);
 }
 
 function resetTimer() {
     setBtnState(true,false,false);
     timeDisplay.innerHTML = '0.00';
     elapsedTime = 0;
 }
 
 function setBtnState(start,stop,reset){
     startBtn.disabled = !start;
     stopBtn.disabled = !stop;
     resetBtn.disabled = !reset;
 }

3つのボタンを置いて、それぞれにクリックされたときの動作を定義する・・というシンプルなものです。&size(12){外部変数を使っています。他のスクリプトとの併用にはご注意下さい。};

-Date.now()で現在時刻と経過時間を取得
現在時刻は Date.now()という関数で、UTC(協定世界時)での 1970 年 1 月 1 日 00 時 00 分 00 秒 から現在までの経過ミリ秒が与えられます。
タイマーの表示 = 現在時刻 - startBtnが押された時刻 が基本です。
このサンプルでは、一旦ストップした後も続けて計測できるよう、経過時間を累積するようにしているので、
タイマーの表示 = 現在時刻 - startBtnが押された時刻 + 累積経過時間
で計算しています。

-setInterval 関数による表示の更新
動きは、setInterval 関数で、10ミリ秒ごとに表示を更新するルーチンを呼び出すことで実現しています。
 timerID = window.setInterval( function, delay );
 function : delay ミリ秒後に実行したい関数。
 delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。

-clearInterval 関数による更新の停止
この関数で、setInterval による呼び出しをストップしています。
タイマーは複数使えるので、 timerIDでそれらを識別管理します。この場合はsetInterval を設定したときのIDを持つタイマーをストップしています。

-toFixedメソッドによる小数点以下の桁数指定
例えば、対象の数値が  1234.543
toFixed(0)  >  1235
toFixed(1)  >  1234.5
toFixed(2)  >  1234.54  ・・・となります。

-startBtn.disabled = !start;
これは、わかりにくい書き方ですが、
start が trueの場合、disabled(無効)が !true = false。 つまりボタンは有効
start が falseの場合、disabledが !false = true。 つまりボタンは無効
ということで、状況に応じて、3つのボタンをそれぞれ、有効にするか無効にするかを決めています。
~
~