實時倒計時

Question

我有一個倒計時插件相關的問題。 在文檔上沒有關於更改計數選項的信息。 問題是，它不能實時工作。在頁面重新加載時，它從前一次開始計數。

(function($) { 
$.fn.ClassyCountdown = function(options, callback) { 
    var element = $(this); 
    var DaysLeft, HoursLeft, MinutesLeft, SecondsLeft; 
    var secondsLeft; 
    var isFired = false; 
    var settings = { 
     end: undefined, 
     now: $.now(), 
     labels: true, 
     labelsOptions: { 
      lang: { 
       days: 'Days', 
       hours: 'Hours', 
       minutes: 'Minutes', 
       seconds: 'Seconds' 
      }, 
      style: 'font-size: 0.5em;' 
     }, 
     style: { 
      element: '', 
      labels: true, 
      days: { 
       gauge: { 
        thickness: 0.02, 
        bgColor: 'rgba(0, 0, 0, 0.1)', 
        fgColor: 'white', 
        lineCap: 'butt' 
       }, 
       textCSS: '' 
      }, 
      hours: { 
       gauge: { 
        thickness: 0.02, 
        bgColor: 'rgba(0, 0, 0, 0.1)', 
        fgColor: 'white', 
        lineCap: 'butt' 
       }, 
       textCSS: '' 
      }, 
      minutes: { 
       gauge: { 
        thickness: 0.02, 
        bgColor: 'rgba(0, 0, 0, 0.1)', 
        fgColor: 'white', 
        lineCap: 'butt' 
       }, 
       textCSS: '' 
      }, 
      seconds: { 
       gauge: { 
        thickness: 0.02, 
        bgColor: 'rgba(0, 0, 0, 0.1)', 
        fgColor: 'white', 
        lineCap: 'butt' 
       }, 
       textCSS: '' 
      } 
     }, 
     onEndCallback: function() { 
     } 
    }; 
    if (options.theme) { 
     settings = $.extend(true, settings, getPreset(options.theme)); 
    } 
    settings = $.extend(true, settings, options); 
    prepare(); 
    doTick(); 
    setInterval(doTick, 1000); 
    doResponsive(); 

    function prepare() { 
     element.append('<div class="ClassyCountdown-wrapper">' + 
       '<div class="ClassyCountdown-days">' + 
        '<input type="text" />' + 
        '<span class="ClassyCountdown-value"><div></div><span></span></span>' + 
       '</div>' + 
       '<div class="ClassyCountdown-hours">' + 
        '<input type="text" />' + 
        '<span class="ClassyCountdown-value"><div></div><span></span></span>' + 
       '</div>' + 
       '<div class="ClassyCountdown-minutes">' + 
        '<input type="text" />' + 
        '<span class="ClassyCountdown-value"><div></div><span></span></span>' + 
       '</div>' + 
       '<div class="ClassyCountdown-seconds">' + 
        '<input type="text" />' + 
        '<span class="ClassyCountdown-value"><div></div><span></span></span>' + 
       '</div>' + 
      '</div>'); 
     element.find('.ClassyCountdown-days input').knob($.extend({ 
      width: '100%', 
      displayInput: false, 
      readOnly: true, 
      max: 365 
     }, settings.style.days.gauge)); 
     element.find('.ClassyCountdown-hours input').knob($.extend({ 
      width: '100%', 
      displayInput: false, 
      readOnly: true, 
      max: 24 
     }, settings.style.hours.gauge)); 
     element.find('.ClassyCountdown-minutes input').knob($.extend({ 
      width: '100%', 
      displayInput: false, 
      readOnly: true, 
      max: 60 
     }, settings.style.minutes.gauge)); 
     element.find('.ClassyCountdown-seconds input').knob($.extend({ 
      width: '100%', 
      displayInput: false, 
      readOnly: true, 
      max: 60 
     }, settings.style.seconds.gauge)); 
     element.find('.ClassyCountdown-wrapper > div').attr("style", settings.style.element); 
     element.find('.ClassyCountdown-days .ClassyCountdown-value').attr('style', settings.style.days.textCSS); 
     element.find('.ClassyCountdown-hours .ClassyCountdown-value').attr('style', settings.style.hours.textCSS); 
     element.find('.ClassyCountdown-minutes .ClassyCountdown-value').attr('style', settings.style.minutes.textCSS); 
     element.find('.ClassyCountdown-seconds .ClassyCountdown-value').attr('style', settings.style.seconds.textCSS); 
     /*element.find('.ClassyCountdown-value').each(function() { 
      $(this).css('margin-top', Math.floor(0 - (parseInt($(this).height())/2)) + 'px'); 
     });*/ 
     if (settings.labels) { 
      element.find(".ClassyCountdown-days .ClassyCountdown-value > span").html(settings.labelsOptions.lang.days); 
      element.find(".ClassyCountdown-hours .ClassyCountdown-value > span").html(settings.labelsOptions.lang.hours); 
      element.find(".ClassyCountdown-minutes .ClassyCountdown-value > span").html(settings.labelsOptions.lang.minutes); 
      element.find(".ClassyCountdown-seconds .ClassyCountdown-value > span").html(settings.labelsOptions.lang.seconds); 
      element.find(".ClassyCountdown-value > span").attr("style", settings.labelsOptions.style); 
     } 
     secondsLeft = settings.end - settings.now; 
     secondsToDHMS(); 
    } 

    function secondsToDHMS() { 
     DaysLeft = Math.floor(secondsLeft/86400); 
     HoursLeft = Math.floor((secondsLeft % 86400)/3600); 
     MinutesLeft = Math.floor(((secondsLeft % 86400) % 3600)/60); 
     SecondsLeft = Math.floor((((secondsLeft % 86400) % 3600) % 60) % 60); 
    } 

    function doTick() { 
     secondsLeft--; 
     secondsToDHMS(); 
     if (secondsLeft <= 0) { 
      if (!isFired) { 
       isFired = true; 
       settings.onEndCallback(); 
      } 
      DaysLeft = 0; 
      HoursLeft = 0; 
      MinutesLeft = 0; 
      SecondsLeft = 0; 
     } 
     element.find('.ClassyCountdown-days input').val(365 - DaysLeft).trigger('change'); 
     element.find('.ClassyCountdown-hours input').val(24 - HoursLeft).trigger('change'); 
     element.find('.ClassyCountdown-minutes input').val(60 - MinutesLeft).trigger('change'); 
     element.find('.ClassyCountdown-seconds input').val(60 - SecondsLeft).trigger('change'); 
     element.find('.ClassyCountdown-days .ClassyCountdown-value > div').html(DaysLeft); 
     element.find('.ClassyCountdown-hours .ClassyCountdown-value > div').html(HoursLeft); 
     element.find('.ClassyCountdown-minutes .ClassyCountdown-value > div').html(MinutesLeft); 
     element.find('.ClassyCountdown-seconds .ClassyCountdown-value > div').html(SecondsLeft); 
    } 

    function doResponsive() { 
     element.find('.ClassyCountdown-wrapper > div').each(function() { 
      $(this).css('height', $(this).width() + 'px'); 
     }); 
     if (settings.style.textResponsive) { 
      element.find('.ClassyCountdown-value').css('font-size', Math.floor(element.find('> div').eq(0).width() * settings.style.textResponsive/10) + 'px'); 
      element.find('.ClassyCountdown-value').each(function() { 
       $(this).css('margin-top', Math.floor(0 - (parseInt($(this).height())/2)) + 'px'); 
      }); 
     } 
     $(window).trigger('resize'); 
     $(window).resize($.throttle(50, onResize)); 
    } 

    function onResize() { 
     element.find('.ClassyCountdown-wrapper > div').each(function() { 
      $(this).css('height', $(this).width() + 'px'); 
     }); 
     if (settings.style.textResponsive) { 
      element.find('.ClassyCountdown-value').css('font-size', Math.floor(element.find('> div').eq(0).width() * settings.style.textResponsive/10) + 'px'); 
     } 
     element.find('.ClassyCountdown-value').each(function() { 
      $(this).css("margin-top", Math.floor(0 - (parseInt($(this).height())/2)) + 'px'); 
     }); 
     element.find('.ClassyCountdown-days input').trigger('change'); 
     element.find('.ClassyCountdown-hours input').trigger('change'); 
     element.find('.ClassyCountdown-minutes input').trigger('change'); 
     element.find('.ClassyCountdown-seconds input').trigger('change'); 
    } 
}})(jQuery); 

這裏是HTML標籤

$('section').ClassyCountdown({ 
end: $.now() + 645600 // end time}); 

下面連接的jsfiddle https://jsfiddle.net/3nqs02q0/1/

倒計時JS代碼從第6行開始。

Answer 1

由於PID已經指出的那樣，配置參數需非易失性來維持頁面刷新之間的值。

根據要求，這些值可以被硬編碼，存儲在localStorage,sessionStorage，查詢參數中，或者甚至作爲cookie存儲。

重要的是，ClassyCountdown使用Unix而不是Javascript時間。所以配置值必須除以1000，如下面的代碼所示。 OP也可能希望使用「現在」和「結束」參數來實現期望的時間間隔。

工作示例 - 運行片斷嘗試：的

$('.countdown').ClassyCountdown({ 
 
     theme: 'flat-colors', 
 
     now: Math.round(new Date().getTime()/1000), 
 
     end: Math.round(new Date('2017-01-01T00:00Z').getTime()/1000), 
 
     onEndCallback: function() { 
 

 
     // do something ... 
 
     
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<!-- Dependencies --> 
 
<script src="https://vox.space/files/jquery/classycountdown/js/jquery.knob.js"></script> 
 
<script src="https://vox.space/files/jquery/classycountdown/js/jquery.throttle.js"></script> 
 

 
<!-- Classy Countdown --> 
 
<link rel="stylesheet" href="https://vox.space/files/jquery/classycountdown/css/jquery.classycountdown.css" /> 
 

 
<script src="https://vox.space/files/jquery/classycountdown/js/jquery.classycountdown.js"></script> 
 

 
<div class="countdown"></div>

Answer 2

設置固定的結束時間。相反的：

$.now() + 645600 

使用這個構造：

(new Date(year, month, day, hours, minutes, seconds, milliseconds)).getTime() 

例如在2016年使用的結束而終止：

$('section').ClassyCountdown({ 
    end: (new Date(2016, 11, 31, 23, 59, 59, 999)).getTime() 
});     // ^^ month is 0-based