今回実験してみたストップウォッチ
（手元で実験すると別のタブを開いたらその間は計測されず、戻った時に再開する）
ググってみるといくつか書き方が見つかりましたが、解読するのにちょっと時間かかりそうだったので、setTimeoutで1秒ごとにコンソールにメッセージを出してみる を元に「分」と「秒」のストップウォッチを動かすコードを書き足して実験しました。
今回はこういう動作をするストップウォッチを作りたい
startボタンを押したら
- 1秒ごとにカウントアップする
- 60回実行されたら「分」に +1 する
- 「秒」を 0 に戻す
- カウントアップを続ける
stopボタンを押したら
- カウントアップを止める
resetボタンを押したら
- カウントアップを止める
- 「秒」と「分」を 0 に戻す
ボタンを押したときの動作を画面に書き込んでみると
ポイント
startボタンを押したら
setTimeout()の戻り値で「タイマーID」というものを取得して
stopやresetを押した時に
その「タイマーID」をclearTimeout(タイマーID)に渡してsetTimeout()を止める
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<input type="text" id="tb" value="00:00">
<button id='start_bt'>start</button>
<button id='stop_bt'>stop</button>
<button id='reset_bt'>reset</button>
<script>
/************************************
グローバル
************************************/
var sec = 0;
var min = 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, 1000);
}
}
/************************************
stop
************************************/
function stop() {
ticking = false;
clearTimeout(timeOutId);
}
/************************************
reset
************************************/
function reset() {
ticking = false;
clearTimeout(timeOutId);
elem('tb').value = '00:00';
sec = 0;
min = 0;
}
/************************************
timeout
************************************/
function timeout() {
calcTime();
timeOutId = setTimeout(timeout, 1000);
}
/************************************
calcTime
************************************/
function calcTime() {
sec++;
if (sec === 60) {
sec = 0;
min++;
}
var time = add0(min, sec);
elem('tb').value = time.join(':');
}
/************************************
一桁の場合は頭に0をつけて二桁表示にする
************************************/
function add0(min, sec) {
if (min < 10) {
min = '0' + min;
}
if (sec < 10) {
sec = '0' + sec;
}
var time = [min, sec];
return time;
}
</script>
</body>
</html>
|
意訳時間を表示するテキストボックス スタートボタン ストップボタン リセットボタン 秒を0にする 分を0にする setTimeout() の返り値(タイマーのID)を入れる変数 時間が進んでいるかどうか start_btをクリックしたらstartを実行する stop_btをクリックしたらstopを実行する reset_btをクリックしたらresetを実行する この機能がやること 受け取ったidの要素を返す この機能がやること 時間が動いていたら 何もしない 止まっていたら tickingをtrueにして 1秒(1000ミリ秒)後にtimeoutを実行する この機能がやること tickingをfalseにして timeOutIdをクリアする この機能がやること tickingをfalseにして timeOutIdをクリアする テキストボックスに00:00を入れる 「秒」を0に戻す 「分」を0に戻す この機能がやること calcTime()を実行する timeOutIdにsetTimeout()の戻り値(タイマーのID)を入れる この機能がやること 「秒」をカウントアップする（+1する） もし「秒」が60なら 「秒」を0にして 「分」をカウントアップする 「分」と「秒」が一桁なら二桁にして テキストボックスに : でつなげて入れる この機能がやること もし「分」が10より小さかったら 頭に0をつけて もし「秒」が10より小さかったら 頭に0をつけて 「分」と「秒」を配列に入れて 返す |
関連記事