jquery.countdown.jsを使って設定日からのカウントダウンを表示する方法｜DAD UNION

このブログ記事では、jQueryのプラグインであるjquery.countdown.jsを使用して、設定した日付からのカウントダウンを表示する方法を紹介します。
簡単に理解できるように、ステップバイステップで解説していきます。

Contents

はじめに
必要なファイルを準備する
HTMLファイルの設定
jquery.countdown.jsを使って設定日からのカウントダウンを表示するJavaScriptの記述
設定日からのカウントダウンを表示するCSSの記述
jquery.countdown.js：設定日からのカウントダウンを表示するデモページ
ソース元：jQuery Countdown
注意点
まとめ

はじめに

カウントダウン機能は、イベントの開始日や終了日を知らせるために非常に便利です。例えば、特定のセール終了までの時間を表示したり、イベントの開始までの時間を知らせたりすることができます。
今回使用するjquery.countdown.jsは、簡単にカウントダウン機能を追加できるjQueryプラグインです。

必要なファイルを準備する

まず、カウントダウンを実装するために必要なファイルを準備します。以下のファイルをダウンロードまたはリンクしてください。

jQuery (https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js)
jquery.countdown.js
jquery.countdown-ja.js
jquery.countdown.css

これらのファイルをプロジェクトに含めることで、カウントダウン機能を利用する準備が整います。

HTMLファイルの設定

HTMLファイルにカウントダウンを表示するためのエリアを作成します。以下のコードをHTMLファイルに追加してください。

<div id="iCntdown1" class="clCntdown"></div>


<div id="iCntdown2" class="clCntdown"></div>


<div id="iCntdown3" class="clCntdown"></div>

　
カウントダウンを表示するための3つのdivエリアを用意しています。

jquery.countdown.jsを使って設定日からのカウントダウンを表示するJavaScriptの記述

次に、jquery、jquery.countdown.js、jquery.countdown-ja.jsファイルを読み込みます。これらのスクリプトファイルを読み込むことで、カウントダウン機能を利用できるようになります。
$().countdown()でカウントダウンを表示させるエリアと表示方法（オプション）を設定します。カウントダウンを設定するために、JavaScriptでカウントダウンの終了日時を設定し、各エリアに対してカウントダウンを適用します。以下のコードを追加してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript" src="jquery.countdown-ja.js"></script>
<script type="text/javascript">
var cntdown = new Date();
cntdown.setDate(cntdown.getDate() + 10); 

$(function() {

	$.countdown.setDefaults({ description: '10日前まであと' });
	
	$('#iCntdown1').countdown({until: cntdown});
	$('#iCntdown2').countdown({
		until: cntdown,
		format: 'HMS',
		description: '10日前まであと'
	});
	$('#iCntdown3').countdown({
		until: cntdown,
		compact: true,
		description: ''
	}); 

});
</script>

　
上記のコードでは、カウントダウンの終了日時を現在の日付から10日後に設定し、各カウントダウンエリアに対して異なる形式でカウントダウンを適用しています。

設定日からのカウントダウンを表示するCSSの記述

jquery.countdown.cssファイルを読み込みます。カウントダウンエリアのスタイルをCSSで設定します。以下のスタイル設定をCSSに追加してください。

<link rel="stylesheet" href="jquery.countdown.css">
<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	padding:10px 0;
	font-size:18px;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:900px;
	margin:0 auto;
}
.clCntdown{
	width:250px;
	border:1px solid #ccc;
	background-color:#333;
	color:#FFF;
	margin:20px auto;
	text-align:center;
}
</style>

　
このスタイル設定では、全体のフォントやレイアウトを整え、カウントダウンエリアを中央に配置しています。