こういうストップウォッチを作ってみる
コード.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> |