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

今回は設定日からのカウントダウンを表示してみます。

1．読込む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>

2．読込むJsファイルと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>

3．HTMLの記述例

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


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


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

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

ソース元：jQuery Countdown

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