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



過去にご紹介した
JQUERY.CLASSYLED:時間をデジタルに表示するJS
と似た感じですが、今回は設定日からのカウントダウンを表示してみます。

1.読込むCSSファイルとCSSの記述例

<link rel="stylesheet" href="jquery.countdown.css">
<style>
.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="http://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の時間に依存するので、
統一された時間を表示する様でしたらサーバーサイドプログラムで
サーバーの時間を表示した方が良い様に思います。