今回作ったストップウォッチ
（手元で実験すると別のタブを開いたらその間は計測されず、戻った時に再開する）
ストップウォッチを作る実験（分と秒）
に「時」と「ミリ秒」も計測できるようにしてみる
（hour と milsec の処理を追加しただけ）
「ミリ秒」は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='start_bt'>start</button>
<button id='stop_bt'>stop</button>
<button id='reset_bt'>reset</button>
<script>
/************************************
グローバル
************************************/
var milsec = 0;
var sec = 0;
var min = 0;
var hour = 0;
var timeOutId;
var ticking = false;
/************************************
イベント
************************************/
elem('start_bt').onclick = start;
elem('stop_bt').onclick = stop;
elem('reset_bt').onclick = reset;
/************************************
document.getElementById(id)でidの要素を返す
************************************/
function elem(id) {
return document.getElementById(id);
}
/************************************
start
************************************/
function start() {
if(ticking === true) {
//動いているときは何もしない
} else {//止まっていたら動かす
ticking = true;
setTimeout(timeout, 10);//一秒後に実行する
}
}
/************************************
stop
************************************/
function stop() {
ticking = false;
clearTimeout(timeOutId);
}
/************************************
reset
************************************/
function reset() {
ticking = false;
clearTimeout(timeOutId);
elem('tb').value = '00:00:00:00';
milsec = 0;
sec = 0;
min = 0;
hour = 0;
}
/************************************
timeout
************************************/
function timeout() {
calcTime();
timeOutId = setTimeout(timeout, 10);
}
/************************************
calcTime
************************************/
function calcTime() {
milsec++;
if (milsec === 100) {
milsec = 0;
sec++;
}
if (sec === 60) {
sec = 0;
min++;
}
if (min === 60) {
min = 0;
hour++;
}
var time = add0(hour, min, sec, milsec);
elem('tb').value = time.join(':');
}
/************************************
一桁の場合は頭に0をつけて二桁表示にする
************************************/
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;
}
</script>
</body>
</html>
|
