倒數計時

[yehlu]

https://blog.patw.me/archives/198/jque ... -seconds/


https://github.com/patryk/jquery.timers


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/507 ... a650c.html

[yehlu]

代碼: 選擇全部

@section('scripts')
<script src="js/jquery.timers.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var startDate = new Date('{{ $examstatus['start'] }}');
  var endDate = new Date('{{ $examstatus['end'] }}');
  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);
                  window.location.href = '/examfinish';
               }
           });
     });
</script>
@endsection

[yehlu]

http://hilios.github.io/jQuery.countdown/

代碼: 選擇全部

<div id="getting-started"></div>
<script type="text/javascript">
  $("#getting-started")
  .countdown("2017/01/01", function(event) {
    $(this).text(
      event.strftime('%D days %H:%M:%S')
    );
  });
</script>