Webタイマー(カウントダウン)

Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。
開始後に表示される「フルスクリーンで表示する」をクリックすると、大きなタイマーを表示できます。

00:00:00

※終了時に下の音が鳴るので、タイマーを使用する前に音量を調整してください。

Webタイマー(カウントダウン)で利用している音源について

BGM・ジングル・効果音のフリー素材|OtoLogic © OtoLogic
Creative Commons Attribution 4.0 International

Webタイマー(カウントダウン)の注意事項

  • Webタイマー(カウントダウン)の数値などは正確性を保証するものではありません。
  • Webタイマー(カウントダウン)の数値などに関して当サイトは一切責任を負いません。
出張/持込/宅配でパソコン修理・設定 24時間365日対応

Webタイマー(カウントダウン)ツールについて

Webタイマー(カウントダウン)ツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変やエラーメッセージなどの省略をしているので、Webタイマー(カウントダウン)ツールで実際に使用しているソースコードとは異なります。また、タイマー(カウントダウン)機能のためにEasyTimer.jsというライブラリを使用し、終了音にはフリー素材を使用しています。

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

HTML

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

HTML
<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>

<div id="sound-setting">
    <p>※終了時に下の音が鳴るので、タイマーを使用する前に音量を調整してください。</p>
    <audio src="mp3/clock-alarm.mp3" id="sound-sample" controlsList="nodownload" loop controls></audio>
</div>

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

<audio src="mp3/clock-alarm.mp3" id="sound" loop></audio>

終了音サンプルのコントロールバーのダウンロードボタンを非表示

audioタグのcontrolsList属性の値にnodownloadを指定することで、Chromeではダウンロードボタンを非表示にすることができます。

HTML
<audio src="mp3/clock-alarm.mp3" id="sound-sample" controlsList="nodownload" loop controls></audio>

EasyTimerのインスタンスを生成

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

JavaScript
let timer = new easytimer.Timer();

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

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

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

終了音サンプルの音量設定

終了音サンプルの初期音量をpropメソッドで0.6に設定します。

JavaScript
$soundSample.prop('volume', .6);

フルスクリーンで表示

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

JavaScript
$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関数で繰り返し処理します。

JavaScript
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の値を切り替えます。

JavaScript
$('#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に再設定します。

JavaScript
$('#use-timer').on('click', () => {
    $('#timer-setting, #sound-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に再設定します。

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

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

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

JavaScript
$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) {
        $sound.trigger('load');

        $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);
            $sound.prop('volume', $soundSample.prop('volume')).trigger('play');
        });

        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が入るようにします。

JavaScript
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になるように置換します。ここでは後で使用するために正規表現だけ変数に格納します。

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

EasyTimer.jsの開始時の設定

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

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

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

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

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

タイマー(カウントダウン)またはカウントダウンを開始

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

JavaScript
timer.start(startSettings);

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

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

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

終了音を読み込み

タイマー(カウントダウン)の終了時に終了音を鳴らすために、タイマー(カウントダウン)の開始時にtriggerメソッドでloadイベントを実行し、終了音のmp3ファイルを読み込んでおきます。

JavaScript
if (startSettings.countdown) {
    $sound.trigger('load');
}

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

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

JavaScript
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イベントが発火します。
終了音の音量を、propメソッドでvolumeプロパティの値をサンプルと同じに設定してから、triggerメソッドでplayイベントを実行して再生します。

JavaScript
if (startSettings.countdown) {
    timer.addEventListener('targetAchieved', () => {
        $pause.prop('disabled', true);
        $sound.prop('volume', $soundSample.prop('volume')).trigger('play');
    });
}

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

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

JavaScript
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メソッドで切り替えます。不要なボタンを押せなくすることによってユーザーの誤操作を減らします。

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

おわりに

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

出張/持込/宅配でパソコン修理・設定 24時間365日対応
出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス
コメント パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。