JavaScript countdown in real time

Question

I have a problem related to countdown plugin. On the documentation there is nothing about changing options of counting. The problem is that, it doesn't work in a real time. On the page reload it starts counting from previous time.

(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);

Here is connection with html tag

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

Here is JSFiddle https://jsfiddle.net/3nqs02q0/1/

Countdown JS code starts from the 6th line.

Answer 1

As PID already noted, the configuration parameters need to be non-volatile to maintain their value between page refreshes.

Depending on the requirements, the values could be hard coded, stored in localStorage, sessionStorage, a query parameter, or even as a cookie.

Importantly, ClassyCountdown uses Unix rather than Javascript time. So the configuration values must be divided by 1000 as shown in the code below. OP may also want to use both the "now" and "end" parameters to achieve the desired time interval.

Working example - Run the snippet to try:

$('.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

Set a fixed end time. Instead of:

$.now() + 645600

Use this constructor:

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

For example to end at the end of 2016 use:

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