JavaScript实时倒计时_Javascript_Jquery

JavaScript实时倒计时

javascript jquery

JavaScript实时倒计时,javascript,jquery,Javascript,Jquery,我有一个关于倒计时插件的问题。在文档中没有关于更改计数选项的内容。问题是，它不能实时工作。在“重新加载”页面上，它从上一次开始计数 (function($) { $.fn.ClassyCountdown = function(options, callback) { var element = $(this); var DaysLeft, HoursLeft, MinutesLeft, SecondsLeft; var secondsLeft; var isF

我有一个关于倒计时插件的问题。在文档中没有关于更改计数选项的内容。问题是，它不能实时工作。在“重新加载”页面上，它从上一次开始计数

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

这是JSFIDLE

倒计时JS代码从第6行开始。

设置固定的结束时间。而不是：

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

设定一个固定的结束时间。而不是：

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

正如PID已经指出的，配置参数需要是非易失性的，以便在页面刷新之间保持其值

根据需要，这些值可以硬编码、存储在查询参数中，甚至可以作为查询参数

重要的是，使用Unix而不是Javascript时间。因此，配置值必须除以1000，如下面的代码所示。OP可能还希望同时使用“现在”和“结束”参数来实现所需的时间间隔

工作示例-运行代码段以尝试：

$（'.countdown'）。ClassyCountdown({
主题:"纯色",，
现在：Math.round（new Date（）.getTime（）/1000），
结束：Math.round（新日期（'2017-01-01T00:00Z'）.getTime（）/1000），
onEndCallback:function（）{
//做点什么。。。
}
});
正如PID已经指出的，配置参数需要是非易失性的，以便在页面刷新之间保持其值
根据需要，这些值可以硬编码、存储在查询参数中，甚至可以作为查询参数
重要的是，使用Unix而不是Javascript时间。因此，配置值必须除以1000，如下面的代码所示。OP可能还希望同时使用“现在”和“结束”参数来实现所需的时间间隔
工作示例-运行代码段以尝试：

$（'.countdown'）。ClassyCountdown({
主题:"纯色",，
现在：Math.round（new Date（）.getTime（）/1000），
结束：Math.round（新日期（'2017-01-01T00:00Z'）.getTime（）/1000），
onEndCallback:function（）{
//做点什么。。。
}
});

这是因为现在的美元。它总是需要当前时间，你需要设置一个正确的结束日期我试过了，但它不起作用我需要更改$.now（），但不是什么？你说的“它不实时工作”是什么意思？@Roberto在重新加载页面时，它开始计算当前时间是因为$.now。它总是需要当前时间，你需要设置一个正确的结束日期我试过了，但它不起作用我需要更改$.now（），但不是什么？你说的“它不实时工作”是什么意思？@Roberto在重新加载页面上它开始计算当前时间OK，但我不需要年、月和毫秒。当我把它放在代码中时，它开始以错误的方式计数。不是一天，而是一年好的，但我不需要年，月和毫秒。当我把它放在代码中时，它开始以错误的方式计数。而不是一天，而是一年