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

jquery.countdown.jsを使って設定した日からのカウントダウンを表示する方法をご紹介します。

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

※jquery.countdown.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>

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

※jquery、jquery.countdown.js、jquery.countdown-ja.jsファイルを読み込みます。$().countdown()でカウントダウンを表示させるエリアと表示方法（オプション）を設定します。

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

設定日からのカウントダウン表示エリアのHTMLの記述

※設定日からのカウントダウンを表示するエリアを3つ用意しました。必要に応じて変更して下さい。

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


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


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

jquery.countdown.js：設定日からのカウントダウンを表示するデモページ

jquery.countdown.js：設定日からのカウントダウンを表示するデモ

ソース元：jQuery Countdown

jQuery Countdown

JavaScriptだと各ユーザーのPCの時間に依存するので、統一された時間を表示する様でしたらサーバーサイドプログラムでサーバーの時間を表示した方が良い様に思います。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。