以前書いた以下の２つは
ストップウォッチを作る実験（分と秒）
ストップウォッチを作る実験（時と分と秒とミリ秒）
別のタブを見ている時間は計測されない
今回は別のタブを見ている間も後ろで計測が進むはず
コード.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>
|
