かなり出回っていますが、ちょっと作ってみたかったので作りました。カウントダウンタイマーで検索するとかなりの数ありますね。
ちょっとお手軽のタイマーを作ってみました。jQueryのプラグインとかでありますけど、まあ普通にカウントダウンするだけなら簡単に出来ますね。
サンプルでは自分で決めた時間をカウント・ダウンします。
スポンサーリンク
jQueryでのコード
一応今年（2012年）の12月24日のカウントダウンをします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>カウントダウンタイマー</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function() { countDown(); }); function countDown() { var startTime = new Date(); //カウントダウンの終了期日を記入↓ var endTime = new Date('December 24,2012, 01:00:00'); var diff = endTime - startTime; var times = 24 * 60 * 60 * 1000; var day = Math.floor(diff / times) var hour = Math.floor(diff % times / (60 * 60 * 1000)) var min = Math.floor(diff % times / (60 * 1000)) % 60 var sec = Math.floor(diff % times / 1000) % 60 % 60 var ms = Math.floor(diff % times / 10) % 100 if(diff > 0){ $("#Timer").text(day + '日' + hour + '時間' + min + '分' + sec +'秒' + ms); setTimeout('countDown()', 10); } else { //終了した時のテキスト $("#Timer").text('終了しました！'); } } </script> </head> <body> <div class="container"> <h1>jQueryのカウントダウンタイマー</h1> <blockquote> <div id="Timer"></div> </blockquote> </div> </body> </html> |
デモページも作りましたのでご覧くださいませ。
1件のコメント