[jQuery] 倒數計時(還有X天X時X分X秒)

Standard

jQuery 倒數計時, 需要 jQuery.Timers 這個 plugin.
startDate 可以用 server 的時間輸出, 避免 client 的電腦時間不準。

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript' language='javascript'>
  google.load('jquery', '1.4.3');
</script>
<script src='jquery.timers-1.2.js' type='text/javascript'></script>
<script type='text/javascript'>
  var startDate = new Date('2010/11/11 08:00');
  var endDate = new Date('2010/11/15 23:00');
  var spantime = (endDate - startDate)/1000;

  $(document).ready(function () {
    $(this).everyTime('1s', function(i) {
       spantime --;
       var d = Math.floor(spantime / (24 * 3600));
       var h = Math.floor((spantime % (24 * 3600)) / 3600);
       var m = Math.floor((spantime % 3600) / (60));
       var s = Math.floor(spantime % 60);

      if (spantime > 0) {
        $('#hour').text(h + (d*24));
        $('#min').text(m);
        $('#sec').text(s);
      } else { // 避免倒數變成負的
        $('#hour').text(0);
        $('#min').text(0);
        $('#sec').text(0);
      }
    });
  });
</script>

還有:
<div id="hour"></div>
時
<div id="min"></div>
分
<div id="sec"></div>
秒

ref: http://topic.csdn.net/u/20080323/13/50787be4-7502-4246-b609-470c9e9a650c.html

2 thoughts on “[jQuery] 倒數計時(還有X天X時X分X秒)

  1. 倒數計時器有 jquery.countdown
    這個jQuery套件可以用
    功能還蠻齊全的
    可以參考看看
    要用中文的話另外有中文語系的附加檔
    jquery.countdown-zh-TW.js

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *