jQuery的倒計時停止復位

Question

我用這個倒計時腳本http://keith-wood.name/countdown.html

我的代碼是：

<script type="text/javascript"> 
    $(function() { 
     $('#defaultCountdown').countdown({ until: +43200 }); 
     $('#removeCountdown').toggle(function() { 
       $(this).text('Re-attach'); 
       $('#defaultCountdown').countdown('destroy'); 
      }, 
      function() { 
       $(this).text('Remove'); 
       $('#defaultCountdown').countdown({ until: +43200 }); 
      }); 
    }); 
</script> 

現在，這倒計數至12小時，但問題是，我每次刷新頁面的計數器開始一遍又一遍，所以基本上12小時將永遠不會結束。

我想自動啓動，但12小時後完成。

請幫忙嗎？

Answer 1

而不是每次頁面刷新到倒計時腳本時都要傳遞12個小時，您需要傳遞現在和期望日期之間的小時差。

<script type="text/javascript"> 
    $(function() { 
     var date1 = new Date(); 
     var date2 = new Date("2015-04-21 23:59:59"); 
     var hours = Math.abs(date1 - date2)/36e5; 
     hours = // convert hour to until format 
     $('#defaultCountdown').countdown({ until: hours }); 
     $('#removeCountdown').toggle(function() { 
       $(this).text('Re-attach'); 
       $('#defaultCountdown').countdown('destroy'); 
      }, 
      function() { 
       $(this).text('Remove'); 
       $('#defaultCountdown').countdown({ until: +43200 }); 
      }); 
    }); 
</script> 

Answer 2

基本上你需要保存倒計時，並在每次加載頁面時都返回。

下面的代碼段應該能夠做到。調用get12HourPeriod將從當前日期開始添加12小時並保存到cookie中。只要你不通過true它，每一頁重新加載將從cookie獲得值，你的倒計時應該繼續正常。如果您通過了true參數，那麼它將刪除該Cookie，然後運行（或重新連接點擊）將保存新的12小時時間段。

<script type="text/javascript"> 
    function get12HourPeriod(reset) { 
     if (reset) { // remove date from cookie 
      document.cookie = 'countdownTo=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; // remove cookie date 
      return; 
     } 

     if (document.cookie.indexOf('countdownTo=') == -1) { // create cookie if not exists 
      var today = new Date(); // get current date 
      today.setHours(today.getHours() + 12); // add 12 hours to it 
      document.cookie = 'countdownTo=' + today.getTime() + ';expires=' + today.toGMTString(); // create cookie in milliseconds 
     } 

     var cookies = document.cookie; // get all cookies 

     cookies = cookies.substr(cookies.indexOf('countdownTo='), cookies.length); // get only the cookie we need it 

     if (cookies.indexOf(';') != -1) { // make sure only our cookie is returned 
      cookies = cookies.substr(0, cookies.indexOf(';')); 
     } 

     cookies = cookies.split('=')[1]; // get cookie value 

     return new Date(parseInt(cookies, 10)); // parse the milliseconds saved and return the countdown as date 
    } 

    $(function() { 
     $('#defaultCountdown').countdown({ until: get12HourPeriod() }); 
     $('#removeCountdown').toggle(function() { 
       $(this).text('Re-attach'); 
       $('#defaultCountdown').countdown('destroy'); 
       get12HourPeriod(true); // passing true here will reset the countdownTo 
      }, 
      function() { 
       $(this).text('Remove'); 
       $('#defaultCountdown').countdown({ until: get12HourPeriod() }); 
      }); 
    }); 
</script>