今回は設定日からのカウントダウンを表示してみます。
1.読込むCSSファイルとCSSの記述例
<link rel="stylesheet" href="jquery.countdown.css"> <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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の時間に依存するので、統一された時間を表示する様でしたらサーバーサイドプログラムでサーバーの時間を表示した方が良い様に思います。