LANG SELRCT

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

2019年2月9日土曜日

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


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




ストップウォッチを作る実験(分と秒)
に「時」と「ミリ秒」も計測できるようにしてみる
(hour と milsec の処理を追加しただけ)

「ミリ秒」は2桁で表示しています



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




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="tb" value="00:00:00:00">
    <button id='start_bt'>start</button>
    <button id='stop_bt'>stop</button>
    <button id='reset_bt'>reset</button>
    
<script>
/************************************
グローバル
************************************/
var milsec = 0;
var sec = 0;
var min = 0;
var hour = 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, 10);//一秒後に実行する
  }
}

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

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

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

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

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

  </body>
</html>