2019年3月17日日曜日

ストップウォッチを作る実験（start→stop→resume）


こういうストップウォッチを作ってみる






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


index.html 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #tb {
        color: white;
        background-color: dodgerblue;
        font-size: 24px;
        border: none;
        border-radius: 5px;
        padding: 5px;
      }
      
      #start_bt {
        width: 55px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="tb" value="00 : 00 : 00 : 00">
    <br>
    <button id="start_bt">start</button>
    <button id="reset">reset</button>
    <input type="text" id="tb_none" value="0">
    
<script>
var startTime;
var intervalTime;
var pastTime = 0;

function elem(id) {
  return document.getElementById(id);
}

elem('start_bt').onclick = stopWatch;
elem('reset').onclick = resetWatch;

function stopWatch() {
  var value = elem('start_bt').textContent;
  switch(value) {
    case "start": 
      startTime = new Date();
      elem('start_bt').textContent = 'stop'; 
      intervalTime = setInterval(culcTime, 10); 
      break;
    case "stop": 
      elem('start_bt').textContent = 'resume';
      pastTime = new Date().getTime() - startTime.getTime();
      console.log(pastTime);
      clearInterval(intervalTime);
      break;
    case "resume":
      pastTime = parseInt(elem("tb_none").value);
      
      startTime = new Date();
      elem('start_bt').textContent = 'stop';
      addTime = parseInt(elem("tb_none").value);
      intervalTime = setInterval(culcTime, 10);
      break;
  } 
} 

function culcTime() { 
  var stopTime = new Date();
  var milsec = stopTime - startTime + pastTime;//差分のミリ秒
  elem("tb_none").value = milsec;
  var hour = Math.floor(milsec / 1000 / 60 / 60);//差分のミリ秒を/秒にして/分にして/時にして小数点以下切り捨てる
  
  var milsecM = milsec - (hour * 60 * 60 * 1000);//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒
  var min = Math.floor(milsecM / 1000 / 60);//それを/秒にして/分にして小数点以下を切り捨てる
  
  var milsecS = milsecM - (min * 60 * 1000);//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒からmin分のミリ秒を引いた残りのミリ秒
  var sec = Math.floor(milsecS / 1000);//それを/秒にして小数点以下を切り捨てる
  
  var milsecMS = milsecS % 1000;//差分のミリ秒からhour分のミリ秒を引いた残りのミリ秒からmin分のミリ秒を引いた残りのミリ秒を秒にした余りのミリ秒
  var milsec = milsecMS.toString().slice(0, 2);//それを2桁にする
  var time = add0([hour, min, sec, milsec]);
  elem('tb').value = time.join(' : ');
}

function add0(times) {
  for(var i = 0; i < times.length; i++) {
    if(times[i] < 10) {
      times[i] = "0" + times[i];
    }
  }
  return times;
}

function resetWatch() {
  elem('start_bt').textContent = "start";
  elem('tb').value = "00 : 00 : 00 : 00";
  clearInterval(intervalTime);
  pastTime = 0;
}
</script>
  </body>
</html>