必要なファイルを読み込んでおいて、簡単なjQueryとHTMLを記述するだけで、ウェブページにカウントダウン・タイマーを設置できるスクリプトを紹介します。

実装したサンプルは以下URLからご覧になれます。

実装サンプル：https://on-ze.com/demo/jquery-simple-timer/

カウントダウンはサイトにアクセスした時点から始まります。

またカウントが終わったときに指定した要素にCSSのクラスを追加できるので、カウント中とカウント終了後でデザインを変えることも可能。
シンプルで使い勝手のいいjQueryプラグインです。

設置方法は以下より。

超カンタン［Simple.Timer］の設置方法

まずは公式サイトから必要なファイルをダウンロードしてきましょう。

ダウンロード：http://csouza.me/jQuery-Simple-Timer/

圧縮されているzipファイルを解凍すると、フォルダの中に「jquery.js」と「query.simple.timer.js」の２つのJSファイルを確認できるはずです。

  • jquery.js
  • jquery.simple.timer.js

この２つのファイルをサーバーにアップロードして、その後HTMLの適当な箇所で読み込みます。

<script src="jquery.js"></script>
<script src="jquery.simple.timer.js"></script>

またこのときに、タイマーを初期化するJavaScriptのコードも同時に記述しておきましょう。
ここではclass="timer"という要素にカウントダウンを表示させると仮定して、次のように記述します。

<script>
$(function(){
	$('.timer').startTimer();
});
</script>

次にHTMLの<body>〜</body>内、タイマーを挿入したい箇所に先ほどのclass="timer"を付与したボックス要素を作ります。

さらにHTML5から導入されたカスタムデータ属性で「data-seconds-left」または「data-minutes-left」を追加。この値でカウントに要する時間を指定します。
具体的には次のようなコードになります。

<body>
<div class='timer' data-minutes-left="3"></div>
<div class='timer' data-seconds-left="180"></div>
</body>

「data-minutes-left」のほうは分単位で指定、「data-seconds-left」のほうは秒単位で指定します。

つまり上記２つのコードはどちらも「3分」を意味します。
そして基本的にはこれで設置が完了。簡単ですね。

［Simple.Timer］のオプション設定

［Simple.Timer］では［onComplete］と［loop］という２つのオプションを設定することが可能です。

オプション設定：「onComplete」

［onComplete］ではカウントが終了したときの処理を指定できます。

例えば、カウントダウン終了時にタイマーのボックス要素にclass="is-complete"という属性を追加したいとき、次のように記述すると実装できます。

<script>
$(function(){
	$('.timer').startTimer({
		onComplete: function(element){
			element.addClass('is-complete');
		}
	});
});
</script>

もちろん、もっと複雑な処理も行えるので色々試してみてください。

オプション設定：「loop」

［loop］では、カウントダウンが終了したときに再び最初からカウントを始めるようにループします。
カウント終了から再スタートまでの時間は［loopInterval］で指定します。

<script>
$(function(){
	$('.timer').startTimer({
		onComplete: function(element){
			element.addClass('is-complete');
		},
		loop: true,
		loopInterval: 3,
	});
});
</script>

［loop］で指定する値は「true」か「false」になり、「true」にするとループします。
また［loopInterval］では終了〜再スタートまでの「秒数」を指定します。

本当に簡単にできるのでjQuery初心者の方でも気軽に使えるはずです。ぜひお試しください。