LANG SELRCT

コードを書く場所についてはこちら

2019年2月9日土曜日

ストップウォッチを作る実験(分と秒)


今回実験してみたストップウォッチ
(手元で実験すると別のタブを開いたらその間は計測されず、戻った時に再開する)




ググってみるといくつか書き方が見つかりましたが、解読するのにちょっと時間かかりそうだったので、setTimeoutで1秒ごとにコンソールにメッセージを出してみる を元に「分」と「秒」のストップウォッチを動かすコードを書き足して実験しました。


今回はこういう動作をするストップウォッチを作りたい

startボタンを押したら
  1. 1秒ごとにカウントアップする
  2. 60回実行されたら「分」に +1 する
  3. 「秒」を 0 に戻す
  4. カウントアップを続ける

stopボタンを押したら
  • カウントアップを止める

resetボタンを押したら
  • カウントアップを止める
  • 「秒」と「分」を 0 に戻す


ボタンを押したときの動作を画面に書き込んでみると


ポイント
startボタンを押したら
setTimeout()の戻り値で「タイマーID」というものを取得して
stopやresetを押した時に
その「タイマーID」をclearTimeout(タイマーID)に渡してsetTimeout()を止める



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="tb" value="00:00">
    <button id='start_bt'>start</button>
    <button id='stop_bt'>stop</button>
    <button id='reset_bt'>reset</button>
    
<script>
/************************************
グローバル
************************************/
var sec = 0;
var min = 0;
var timeOutId;
var ticking = false;

/************************************
イベント
************************************/
elem('start_bt').onclick = start;
elem('stop_bt').onclick = stop;
elem('reset_bt').onclick = reset;

/************************************
document.getElementById(id)でidの要素を返す
************************************/
function elem(id) {
  return document.getElementById(id);
}

/************************************
start
************************************/
function start() {
  if(ticking === true) {
    //動いているときは何もしない
  } else {
    ticking = true;
    setTimeout(timeout, 1000);
  }
}

/************************************
stop
************************************/
function stop() {
  ticking = false;
  clearTimeout(timeOutId);
}

/************************************
reset
************************************/
function reset() {
  ticking = false;
  clearTimeout(timeOutId);
  elem('tb').value = '00:00';
  sec = 0;
  min = 0;
}

/************************************
timeout
************************************/
function timeout() {
  calcTime();
  timeOutId = setTimeout(timeout, 1000);
}

/************************************
calcTime
************************************/
function calcTime() {
  sec++;
  if (sec === 60) {
    sec = 0;
    min++;
  }
  var time = add0(min, sec);
  elem('tb').value = time.join(':');
}

/************************************
一桁の場合は頭に0をつけて二桁表示にする
************************************/
function add0(min, sec) {
  if (min < 10) {
    min = '0' + min;
  }
  if (sec < 10) {
    sec = '0' + sec;
  }
  var time = [min, sec];
  return time;
}
</script>

  </body>
</html>
意訳
 


時間を表示するテキストボックス
スタートボタン
ストップボタン
リセットボタン





秒を0にする
分を0にする
setTimeout() の返り値(タイマーのID)を入れる変数
時間が進んでいるかどうか




start_btをクリックしたらstartを実行する
stop_btをクリックしたらstopを実行する
reset_btをクリックしたらresetを実行する




この機能がやること
受け取ったidの要素を返す





この機能がやること
時間が動いていたら
何もしない
止まっていたら
tickingをtrueにして
1秒(1000ミリ秒)後にtimeoutを実行する






この機能がやること
tickingをfalseにして
timeOutIdをクリアする





この機能がやること
tickingをfalseにして
timeOutIdをクリアする
テキストボックスに00:00を入れる
「秒」を0に戻す
「分」を0に戻す





この機能がやること
calcTime()を実行する
timeOutIdにsetTimeout()の戻り値(タイマーのID)を入れる





この機能がやること
「秒」をカウントアップする(+1する)
もし「秒」が60なら
「秒」を0にして
「分」をカウントアップする

「分」と「秒」が一桁なら二桁にして
テキストボックスに : でつなげて入れる





この機能がやること
もし「分」が10より小さかったら
頭に0をつけて

もし「秒」が10より小さかったら
頭に0をつけて

「分」と「秒」を配列に入れて
返す








関連記事