Webタイマー（カウントダウン）です。ストップウォッチ機能もあります | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

使用しているJavaScriptのライブラリ

• jQuery v3.3.1
• EasyTimer.js v3.1.0

HTML

inputタグのpattern属性に「\d*」を指定して、iPhoneで数字入力のキーパッドが表示されるようにしています。Androidなどでも表示されるようにするには別の方法を考える必要があります。

<button type="button" id="use-timer" disabled>タイマー</button>
<button type="button" id="use-stopwatch">ストップウォッチ</button>

<table id="timer-setting">
    <thead>
        <tr>
            <th>時</th>
            <th>分</th>
            <th>秒</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="hours" pattern="\d*"></td>
            <td><input type="text" id="minutes" pattern="\d*"></td>
            <td><input type="text" id="seconds" pattern="\d*"></td>
        </tr>
    </tbody>
</table>

<div id="time">00:00:00</div>
<div id="show-fullscreen"><a>フルスクリーンで表示する</a></div>

<button type="button" id="start">開始</button>
<button type="button" id="pause" disabled>一時停止</button>
<button type="button" id="stop" disabled>終了</button>

EasyTimerのインスタンスを生成

new演算子を使用してインスタンスを生成します。

let timer = new easytimer.Timer();

jQueryオブジェクトを変数に格納

ボタンを設定するために、jQueryオブジェクトを一旦変数に格納します。

let $start  = $('#start');
let $pause  = $('#pause');
let $stop   = $('#stop');
let $output = $('#time');
let $showFullscreen = $('#show-fullscreen');

フルスクリーンで表示

「フルスクリーンで表示する」が押された時に、Fullscreen APIでタイマー（カウントダウン）をフルスクリーンで開きます。ブラウザー毎にメソッド名が違うので、メソッド名を動的に指定（Computed Property Names）します。

$showFullscreen.on('click', () => {
    let name = isSupportFullscreen($output[0]);
    $output[0][name]();
});

function isSupportFullscreen(target) {
    const FULLSCREEN_API_NAME = [
        'requestFullscreen',
        'webkitRequestFullscreen',
        'mozRequestFullScreen',
        'msRequestFullscreen'
    ];
    let name = '';
    
    $.each(FULLSCREEN_API_NAME, (key, val) => {
        if (target[val]) {
            name = val;
            return false;
        }
    });
    
    if (name !== '') {
        return name;
    } else {
        return false;
    }
}

フルスクリーン表示時のデザイン

fullscreenchangeイベントでフルスクリーンで表示しているかを判定します。フルスクリーン表示時にaddClassメソッドでクラスを追加して、フルスクリーン表示時のデザインをCSSで調整できるようにします。ブラウザーを限定する場合は「:fullscreen」という疑似クラスを使用することでも調整が可能です。ブラウザー毎にイベント名が違うので、each関数で繰り返し処理します。

const FULLSCREEN_CHANGE_NAME = {
    'fullscreenchange'      : 'fullScreenElement',
    'webkitfullscreenchange': 'webkitFullscreenElement',
    'mozfullscreenchange'   : 'mozFullScreenElement',
    'MSFullscreenChange'    : 'msFullscreenElement'
};

$.each(FULLSCREEN_CHANGE_NAME, (event, property) => {
    document.addEventListener(event, () => {
        $.each(FULLSCREEN_CHANGE_NAME, (event, property) => {
            if (document[property] && document[property] !== null) {
                $output.addClass('fullscreen');
                return false;
            } else {
                $output.removeClass('fullscreen');
            }
        });
    });
});

タイマー（カウントダウン）とストップウォッチの切り替え

「タイマー（カウントダウン）」または「ストップウォッチ」のタブが押された時に機能を初期化します。stopメソッドでタイマー（ストップウォッチ）を終了、新しいタイマー（ストップウォッチ）のインスタンスを生成、入力された時分秒の設定を削除、「フルスクリーンで表示する」のリンクからremoveClassメソッドでリンクを表示するためのクラスを削除、textメソッドで開始するボタンのラベルに「開始」にセットします。最後にpropメソッドで開始・一時停止・終了ボタンのdisabledの値を切り替えます。

$('#use-timer, #use-stopwatch').on('click', () => {
    timer.stop();
    timer = new easytimer.Timer();
    $('#timer-setting input').val('');
    $showFullscreen.removeClass('visible');
    $start.text('開始');
    $start.prop('disabled', false);
    $pause.prop('disabled', true);
    $stop.prop('disabled', true);
});

タイマー（カウントダウン）の使用

タイマー（カウントダウン）の場合は、showメソッドで時分秒の設定フィールドを表示します。タイマー（カウントダウン）を使用中だとわかるように、propメソッドで「タイマー（カウントダウン）」タブをdisabledの値をtrueにして無効化し、「ストップウォッチ」タブのdisabledの値をfalseにして有効化します。時間は00:00:00に再設定します。

$('#use-timer').on('click', () => {
    $('#timer-setting').show();
    $('#use-timer').prop('disabled', true);
    $('#use-stopwatch').prop('disabled', false);
    $output.text('00:00:00');
});

ストップウォッチの使用

ストップウォッチの場合は、hideメソッドで不要な時分秒の設定フィールドを非表示にします。ストップウォッチを使用中だとわかるように、propメソッドで「ストップウォッチ」タブのdisabledの値をtrueにして無効化し、「タイマー（カウントダウン）」タブのdisabledの値をfalseにして有効化します。時間は00:00:00.0に再設定します。

$('#use-stopwatch').on('click', () => {
    $('#timer-setting').hide();
    $('#use-timer').prop('disabled', false);
    $('#use-stopwatch').prop('disabled', true);
    $output.text('00:00:00.0');
});

タイマー（カウントダウン）またはストップウォッチのカウントを開始

「開始」が押された時にカウントを開始します。
jQueryオブジェクトには$を付けています。

$start.on('click', () => {
    let hours      = $('#hours').val() !== '' ? $('#hours').val() : '0';
    let minutes    = $('#minutes').val() !== '' ? $('#minutes').val() : '0';
    let seconds    = $('#seconds').val() !== '' ? $('#seconds').val() : '0';
    let timeValues = ['hours', 'minutes', 'seconds'];
    
    let regex = /:(\d{1})$/;
    let replacement = '.$1';

    let startSettings = {
        countdown: true,
        precision: 'seconds',
        startValues: {
            hours  : parseInt(hours),
            minutes: parseInt(minutes),
            seconds: parseInt(seconds)
        }
    };
    
    if (
        $('#use-stopwatch').prop('disabled')
        && (hours === '0' && minutes === '0' && seconds === '0')
    ) {
        timeValues.push('secondTenths');
        startSettings = {
            precision: 'secondTenths'
        };
    }
    
    timer.start(startSettings);

    if (isSupportFullscreen($output[0]) !== false) {
        $showFullscreen.addClass('visible');
    }

    if (startSettings.countdown) {
        $output.text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );

        timer.addEventListener('started', () => {
            $output.text(
                timer.getTimeValues().toString(timeValues).replace(regex, replacement)
            );
        });

        timer.addEventListener('targetAchieved', () => {
            $pause.prop('disabled', true);
        });

        timer.addEventListener('secondsUpdated', () => {
            $output.text(
                timer.getTimeValues().toString(timeValues).replace(regex, replacement)
            );
            $('title').text(
                timer.getTimeValues().toString(timeValues).replace(regex, replacement)
            );
        });
    } else {
        timer.addEventListener('secondTenthsUpdated', () => {
            $output.text(
                timer.getTimeValues().toString(timeValues).replace(regex, replacement)
            );
            $('title').text(
                timer.getTimeValues().toString(timeValues).replace(regex, replacement)
            );
        });
    }

    $start.prop('disabled', true);
    $pause.prop('disabled', false);
    $stop.prop('disabled', false);
});

タイマー（カウントダウン）の初期値を設定

時分秒の設定を変数に格納します。未入力の場合は0が入るようにします。

let hours      = $('#hours').val() !== '' ? $('#hours').val() : '0';
let minutes    = $('#minutes').val() !== '' ? $('#minutes').val() : '0';
let seconds    = $('#seconds').val() !== '' ? $('#seconds').val() : '0';
let timeValues = ['hours', 'minutes', 'seconds'];

ミリ秒前のコロンをピリオドに置き換え

初期状態では00:00:00:0の形式なので、00:00:00.0になるように置換します。ここでは後で使用するために正規表現だけ変数に格納します。

let regex = /:(\d{1})$/;
let replacement = '.$1';

EasyTimer.jsの開始時の設定

EasyTimer.jsの開始時の設定をします。countdownプロパティがtrueの場合はカウントダウン、falseの場合はカウントアップになります。precisionプロパティがsecondsの場合は秒まで表示します。startValuesプロパティが開始時の時間で、指定されている場合はその時間から開始されます。

let startSettings = {
    countdown: true,
    precision: 'seconds',
    startValues: {
        hours  : parseInt(hours),
        minutes: parseInt(minutes),
        seconds: parseInt(seconds)
    }
};

ストップウォッチへの切り替え

ストップウォッチに切り替えるタブのdisabledの値がtrue、かつ時分秒の値が全て0の場合はストップウォッチとして動作します。precisionプロパティがsecondTenthsの場合はミリ秒まで表示します。

if (
    $('#use-stopwatch').prop('disabled')
    && (hours === '0' && minutes === '0' && seconds === '0')
) {
    timeValues.push('secondTenths');
    startSettings = {
        precision: 'secondTenths'
    };
}

タイマー（カウントダウン）またはカウントダウンを開始

startメソッドに開始時の設定を渡して開始します。

timer.start(startSettings);

フルスクリーンに対応していればボタンを表示

使用しているブラウザーでFullscreen APIを使用できれば「フルスクリーンで表示する」ボタンを表示します。ここではレイアウトの都合上、showメソッドを使用せずにaddClassメソッドでクラスを追加し、visibilityプロパティの値をvisibleにすることで表示しています。

if (isSupportFullscreen($output[0]) !== false) {
    $showFullscreen.addClass('visible');
}

タイマー（カウントダウン）使用時の時間を更新

開始時にstartedイベント、秒の更新時にsecondsUpdatedイベントが発火します。
getTimeValuesメソッドで経過時間を取得し、textメソッドで表示します。その際、00:00:00:0の最後の:0を.0に置換します。また、titleタグにも経過時間をセットし、別タブを開いていても経過時間がわかるようにします。

if (startSettings.countdown) {
    $output.text(
        timer.getTimeValues().toString(timeValues).replace(regex, replacement)
    );

    timer.addEventListener('started', () => {
        $output.text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );
    });

    timer.addEventListener('secondsUpdated', () => {
        $output.text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );
        $('title').text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );
    });
}

タイマー（カウントダウン）終了時の処理

終了時にtargetAchievedイベントが発火します。

if (startSettings.countdown) {
    timer.addEventListener('targetAchieved', () => {
        $pause.prop('disabled', true);
    });
}

ストップウォッチ使用時の時間の更新

ミリ秒の更新時にsecondTenthsUpdatedイベントが発火します。
タイマー（カウントダウン）使用時と同様に時間を更新します。

if (startSettings.countdown) {
    ～
} else {
    timer.addEventListener('secondTenthsUpdated', () => {
        $output.text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );
        $('title').text(
            timer.getTimeValues().toString(timeValues).replace(regex, replacement)
        );
    });
}

各ボタンの有効/無効を切り替え

開始、一時停止、終了ボタンのdisabledの値を、propメソッドで切り替えます。不要なボタンを押せなくすることによってユーザーの誤操作を減らします。

$start.prop('disabled', true);
$pause.prop('disabled', false);
$stop.prop('disabled', false);

おわりに

当ツールではEasyTimer.jsというライブラリを使用していますが、他にも様々な方法があるのでツールを作成する際は「javascript タイマー ストップウォッチ」などで検索してみてください。また、Fullscreen APIを使用することで全画面対応のツールを制作することができるので、便利機能の一つとしてWebサイトに実装してみるのも良いかもしれません。