日曜エンジニアのアプリ制作
未経験からのWebプログラミング
JavaScriptでWebアプリ

【JavaScript】ブラウザで動くタイマーアプリの作り方

JavaScriptとHTMLで、ブラウザで動くカウントダウンタイマーを作りました。

 

 

この記事では、JavaScriptを用いた「タイマーアプリの作り方」をご紹介します。

 

 

仕様について

  • 分と秒を設定できる。
  • タイマーをタブにも表示する。

 

タイマーを起動させると、他のWebページを閲覧していても、動作し続けます。

スマホでも使えます。

 

制作したタイマーアプリの画像

 

 

HTML

HTMLのコードです。

要素は、大きく2つに分けました。

  1. タイマー表示部( div id="timer" )
  2. コントロールボタン部( div id ="controls" )

※コントロールボタン部とは、分や秒の設定ボタンと、スタート・ストップボタンのことです。

<div id="timer">00:00</div>

<div id="controls">
  <div class="box">
    <button id="min">分</button>
    <button id="sec">秒</button>
  </div>
  <div class="box">
    <button id="start">スタート</button>
    <button id="reset">リセット</button>
  </div>
</div>

 

 

 

JavaScript

カウントダウンタイマーとは、残り時間を表示するタイマーです。

今回のプログラムのしくみは、スタートボタンを押した時刻と、現在の時刻との差を、設定した時間から引き算することで、残り時間として表示しています。

残り時間 = 設定した時間 – (スタートボタンを押した時間 – 現在時刻)

現在時刻は、JavaScriptにあらかじめ設定されている Date.now() メソッドを使って取得します。

Date.now() メソッドは、経過時間をミリ秒単位で返します。ここは「そういうもんだ。」で進みましょう。

 

カウントダウンの時間設定

カウントダウンの初期値を設定するために、「分」や「秒」が押された時に、タイマーを加算する処理を作ります。

設定できるのは59分59秒まで。それを超えたら0になるように設定します。

 

「秒」が押された時の処理

「秒」が押されるたびに、変数 timeToCountDown に1000を加えます。

1秒 = 1000ミリ秒

// 秒が押されるたびに、設定時間を加算する

sec.addEventListener('click', function () {
        // カウントダウン中は、設定を変更できないようにする
        if (isRunning === true) {
            return;
        }

        // 1秒は1000ミリ秒なので
        timeToCountDown += 1000;

        if (timeToCountDown >= 60 * 60 * 1000) {
            timeToCountDown = 0;
        }

        // timeToCountDownをtimerに反映させたいのでupDatetimerを使う
        updateTimer(timeToCountDown);
});

    

 

「分」が押された時の処理

「分」が押されるたびに、変数 timeToCountDown に1000 * 60 を加えます。

1分 = 60秒 = 60000ミリ秒

// 「分」を押した時の処理

min.addEventListener('click', function () {

        // カウントダウン中に設定時間を変更できないようにする
        if (isRunning === true) {
            return;
        }

        // 分 = 60秒なので
        timeToCountDown += 60 * 1000;

        // 60分を超えたら0にする
        if (timeToCountDown >= 60 * 60 * 1000) {
            timeToCountDown = 0;
        }

        // timeToCountDownをtimerに反映させたいので、upDatetimerを使う
        updateTimer(timeToCountDown);
});

 

 

カウントダウン

スタートボタン

スタートボタンが押されたら、カウントダウンを開始します(countDown関数を動かします)

肝は、スタートボタンが押された時刻を取得することです。

Date.now() メソッドの登場です。

これと、現在時刻とを比較することで、カウントダウンを表すからです。

// 「スタート」が押された時の処理

start.addEventListener('click', function () {

        if (isRunning === false) {
            isRunning = true;

            start.textContent = 'ストップ';
            
            startTime = Date.now();

            // カウントダウンの機能は再帰的に実行したいので、countDown関数を入れておく
            countDown();

        } else {
            isRunning = false;

            // 表記をStartに戻す
            start.textContent = 'スタート';

            // この時点のtimeLeftで更新してあげる
            timeToCountDown = timeLeft;

            // カウントを止めたいのでclearTimeoutする
            clearTimeout(timerId);
        }
});

 

countDown関数

スタートボタンが押された時に動く関数です。

ここで、残り時間を計算して、表示します。

また、カウントダウンを繰り返し行うために、再帰的に呼び出すようにします。

function countDown() {
  // setTimeoutを使って、10ミリ秒後(0.01秒後)に実行するようにする
        timerId = setTimeout(function () {

            // 残り時間 = カウントされる時間 - (現在時刻 - スタートボタンを押した時間)
            timeLeft = timeToCountDown - (Date.now() - startTime);

            // 残り時間が0になった時の処理
            if (timeLeft < 0) {
                isRunning = false;
                start.textContent = 'スタート';
                clearTimeout(timerId);
                timeLeft = 0;

                // カウントをリスタートした際にデフォ値の4秒にならないようにする
                timeToCountDown = 0;

                // updateTimer(timeLeft);
                updateTimer(timeLeft);

                return;
            }

            // countDownを再帰的に呼び出すために記述
            updateTimer(timeLeft)
            countDown();

        }, 10);

}

 

残り時間を表示するupdateTimer関数

画面表示するために、ミリ秒を、分や秒に直すための関数です。

引数として、残り時間を渡します。

HTMLを取得して、内容を書き換えます。

// 残り時間を表示するために、ミリ秒を渡すと、「分」や「秒」に直してくれる関数

function updateTimer(t) {
        // 引数として渡されたtでデータオブジェクトを作る
        var d = new Date(t);
        var m = d.getMinutes();
        var s = d.getSeconds();

        m = ('0' + m).slice(-2);
        s = ('0' + s).slice(-2);
        timer.textContent = m + ':' + s;
        
        // タブにタイマーを表示する
        var title = timer.textContent = m + ':' + s;;
        document.title = title;
}

 

以上です。ありがとうございました。

 

JavaScriptをもっと学びたい初心者におすすめの本をご紹介しています。

JavaScriptの本を10冊読んだ中からおすすめを3つJavaScriptの本を10冊読んだ中からおすすめを3つ紹介します。...