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