Webタイマー(カウントダウン)
Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。
開始後に表示される「フルスクリーンで表示する」をクリックすると、大きなタイマーを表示できます。
Webタイマー(カウントダウン)の注意事項
- Webタイマー(カウントダウン)の数値などは正確性を保証するものではありません。
- Webタイマー(カウントダウン)の数値などに関して当サイトは一切責任を負いません。
Webタイマー(カウントダウン)ツールについて
Webタイマー(カウントダウン)ツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変やエラーメッセージなどの省略をしているので、Webタイマー(カウントダウン)ツールで実際に使用しているソースコードとは異なります。また、タイマー(カウントダウン)機能のためにEasyTimer.jsというライブラリを使用しています。
使用している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サイトに実装してみるのも良いかもしれません。
税率を設定して税込/税抜金額の消費税計算ができます。
文字数をカウントできます。
和暦と西暦を相互変換できます。
和暦または西暦から年齢を計算できます。
履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。
キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。
カラーコード(16進数)とRGB値(10進数)を相互変換できます。
Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。
警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。
主なプロバイダーのカスタマーサポートの電話番号を確認できます。
自分のWebブラウザーだけでタスク管理(ToDo)ができます。
エクセル関数を検索できます。
麻雀の和了時の点数(符数/翻数/役)を計算することができます。
Windows 10やExcelなどで使用できる便利なショートカットを確認できます。
消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。
大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。
名前 | きょうみくん |
---|---|
身長 | 181.1cm |
誕生日 | 1月21日 |
所属 | 日本PCサービス株式会社 |
コメント |
パソコン、インターネット、サーモン、ミルクティーが好きです。 エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。 |