[jQuery] グルーポン系サイトでよく見掛けるカウントダウンタイマーのサンプルコード

2011 11/23
カテゴリー : 未分類
jQuery
コメントを書く

jQueryで、グルーポン系サイトでよく見掛けるカウントダウンタイマーを実装しようと、プラグインを探していたのですが、百式さんのライフハックにプラグイン無しでも簡単に実装できそうだったので、一部書き換えてご紹介します。

・元ネタ：グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる | IDEA*IDEA

■ 元のコード

<script type="text/javascript">
$(function() {
  countDown();
});
function countDown() {
var target = new Date("August 26,2010 11:00:00");
var today = new Date();
var h = Math.floor(((target-today)%(24*60*60*1000))/(60*60*1000))
var m = Math.floor(((target-today)%(24*60*60*1000))/(60*1000))%60
var s = Math.floor(((target-today)%(24*60*60*1000))/1000)%60%60
$("#TimeLeft").text(h+'時間'+m+'分'+s+'秒');
  setTimeout('countDown()', 1000);
}
</script>

■ カスタマイズ（日／時／分／秒表記）

<script type="text/javascript">
  $(function() {
    countDown();
    });
    function countDown() {
    var startDateTime = new Date();
    var endDateTime = new Date("November 26,2011 11:00:00");
    var d = Math.floor((endDateTime-startDateTime)/(24*60*60*1000))
    var h = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/(60*60*1000))
    var m = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/(60*1000))%60
    var s = Math.floor(((endDateTime-startDateTime)%(24*60*60*1000))/1000)%60%60
    $("#TimeLeft").text(d+'日'+h+'時間'+m+'分'+s+'秒');
      setTimeout('countDown()', 1000);
    }
</script>