LANG SELRCT

コードを書く場所

2019年2月12日火曜日

ストップウォッチを作る実験(別のタブを見ている間も計測する)


以前書いた以下の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="bt">start</button>
    <button id="reset">reset</button>

<script>
var ticking = false;
var startTime;
var intervalTime;

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

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



function stopWatch() { 
  if (ticking === false){
    ticking = true; 
    startTime = new Date();
    elem('bt').textContent = 'stop'; 
    intervalTime = setInterval(culcTime, 10); 
  }else{
    ticking = false; 
    culcTime(); 
    elem('bt').textContent = "start"; 
    clearInterval(intervalTime); 
  } 
} 

function culcTime() { 
  var stopTime = new Date();
  var milsec = stopTime - startTime;//差分のミリ秒
  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);//それを二桁にする(3桁で表したければ不要な処理)
  var time = add0(hour, min, sec, milsec);
  elem('tb').value = time.join(':'); 
}

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;
}

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