JQuery的落後定時器不應在頁面刷新停止（倒計時）

問候一天，JQuery的落後定時器不應在頁面刷新停止（倒計時）

我使用http://oblalex.github.io/jQuery-backward-timer/。

即使頁面刷新或重新加載，我也想將計時器設置爲繼續。

我打算準備任務管理系統，我想用這個。

當我爲abc人員分配時間時，他/她將啓動計時器並停止計時器。

但是當計時器開啓時，如果人員刷新頁面計時器正在停止。

它應該繼續。

我試過setcookie的概念，但它不適用於我的情況。

我該如何做到這一點。任何幫助將不勝感激。

這是我到目前爲止嘗試過的。

(function ($) { 
        $(document).ready(function() { 
            var allocated_time = $("#allocated_time").val(); 

            $.backward_timer = function (element) { 
                var defaults = { 
                    seconds: allocated_time 
                    , step: 1 
                    , stop_at_zero: false 
                    , format: "h%:m%:s%" 
                    , value_setter: undefined 
                    , on_start: function (timer) {} 
                    , on_cancel: function (timer) {} 
                    , on_exhausted: function (timer) {} 
                    , on_tick: function (timer) {} 
                } 
                , plugin = this 

                plugin.seconds_left = 0 
                plugin.target = $(element) 
                plugin.timeout = undefined 
                plugin.settings = {} 

                plugin.methods = { 
                    init: function (options) { 
                        plugin.settings = $.extend({}, defaults, options) 
                        if (plugin.settings.value_setter == undefined) { 

                            if (plugin.target.is('input')) { 
                                plugin.settings.value_setter = 'val' 
                            } else { 
                                plugin.settings.value_setter = 'text' 
                            } 
                        } 
                        plugin.methods.reset() 
                    } 
                    , start: function() { 
                        if (
                                plugin.timeout == undefined 
                                && !plugin.methods._is_exhausted() 
                                ) { 
                            plugin.settings.on_start(plugin) 

                            var interval = (plugin.seconds_left == plugin.settings.seconds) 
                                    ? 0 
                                    : plugin.settings.step * 1000 
                            setTimeout(plugin.methods._on_tick, interval, interval) 
                        } 
                    } 
                    , cancel: function() { 
                        if (plugin.timeout != undefined) { 
                            clearTimeout(plugin.timeout) 
                            plugin.timeout = undefined 
                            plugin.settings.on_cancel(plugin) 
                        } 
                    } 
                    , reset: function() { 
                        plugin.seconds_left = plugin.settings.seconds 
                        plugin.methods._render_seconds() 
                    } 
                    , _on_tick: function (previous_delay) { 
                        if (previous_delay != 0) { 
                            plugin.settings.on_tick(plugin) 
                        } 

                        plugin.methods._render_seconds() 

                        if (plugin.methods._is_exhausted()) { 
                            plugin.timeout = undefined 
                            plugin.settings.on_exhausted(plugin) 
                        } else { 
                            if (
                                    plugin.seconds_left < plugin.settings.step 
                                    && plugin.settings.stop_at_zero 
                                    ) { 
                                var step = plugin.seconds_left 
                            } else { 
                                var step = plugin.settings.step 
                            } 
                            plugin.seconds_left -= step 
                            var interval = step * 1000 
                            plugin.timeout = setTimeout(plugin.methods._on_tick, 
                                    interval, 
                                    interval) 
                        } 
                    } 
                    , _render_seconds: function() { 
                        var dhms = plugin.methods._seconds_to_dhms(plugin.seconds_left) 
                                , value = plugin.settings.format 

                        if (value.indexOf("d%") !== -1) { 
                            value = value 
                                    .replace('d%', dhms.d) 
                                    .replace('h%', plugin.methods._check_leading_zero(dhms.h)) 
                        } else { 
                            value = value.replace('h%', dhms.d * 24 + dhms.h) 
                        } 

                        value = value 
                                .replace('m%', plugin.methods._check_leading_zero(dhms.m)) 
                                .replace('s%', plugin.methods._check_leading_zero(dhms.s)) 

                        if (plugin.seconds_left < 0) { 
                            value = '-' + value 
                        } 

                        plugin.target[plugin.settings.value_setter](value) 
                    } 
                    , _seconds_to_dhms: function (seconds) { 
                        var seconds = Math.abs(seconds) 
                                , days = Math.floor(seconds/(24 * 3600)) 
                                , seconds = seconds - (days * 24 * 3600) 
                                , hours = Math.floor(seconds/3600) 
                                , seconds = seconds - (hours * 3600) 
                                , mins = Math.floor(seconds/60) 
                                , seconds = Math.floor(seconds - (mins * 60)) 

                        window.onload = function() { 
                            setCookie("minutes", mins.toString(), 1); 
                            setCookie("seconds", seconds.toString(), 1); 
                            setCookie("hours", hours.toString(), 1); 
                            setCookie("days", days.toString(), 1); 
                            mins = getCookie("minutes"); 
                            seconds = getCookie("seconds"); 
                            hours = getCookie("hours"); 
                            days = getCookie("days"); 
                        }; 

                        return {d: days, h: hours, m: mins, s: seconds} 
                    } 
                    , _check_leading_zero: function (number) { 
                        return (number < 10) 
                                ? '0' + number 
                                : '' + number 
                    } 
                    , _is_exhausted: function() { 
                        return plugin.seconds_left <= 0 && plugin.settings.stop_at_zero 
                    } 
                } 
            } 

            $.fn.backward_timer = function (method_or_options) { 
                var options = arguments 

                return this.each(function() { 
                    var plugin = $(this).data('backward_timer') 

                    if (plugin == undefined) { 
                        plugin = new $.backward_timer(this) 
                        $(this).data('backward_timer', plugin); 
                    } 

                    if (plugin.methods[method_or_options]) { 
                        return plugin.methods[method_or_options] 
                                .apply(this, Array.prototype.slice.call(options, 1)) 
                    } else if (
                            typeof method_or_options === 'object' 
                            || !method_or_options 
                            ) { 
                        return plugin.methods.init.apply(this, options) 
                    } else { 
                        $.error(
                                'Method ' 
                                + method_or_options 
                                + ' does not exist on jQuery.backward_timer' 
                                ) 
                    } 
                }) 
            } 

        }); 

    })(jQuery)

來源

2017-10-28 vijay nathji

您確定無法正常使用cookie嗎？爲什麼？

我建議採取不同的方式，與在Cookie中的時間戳：

<div>  
    <span id="timer_default" class="timer"></span> 
    <button id="reset_default">Reset</button> 
</div> 

<script> 
$(document).ready(function(){ 
    var timerEl = $('#timer_default'); 
    var timeCount = 3600; // one hour 
    var timeLeft = timeCount - (+new Date() - createOrGetCookieTime()); // compare timestamp with now 

    $('#timer_default').backward_timer({ 
     seconds: timeLeft , 
     format: 'd%d h%:m%:s%', 
     on_exhausted: function(timer) { 
     timer.target.text('I am exhausted. Reset me!') 
     } 
    }); 

    // start directly 
    timerEl.backward_timer('start'); 

    // if timer is ended (in case of exhausted didn't handle it, not sure) 
    if(timeLeft < 0){ 
    timerEl.backward_timer('cancel'); 
    timerEl.text('I am exhausted. Reset me!') 
    } 

    $('#reset_default').click(function() { 
    timerEl.backward_timer('reset'); 
    setCookie("time", +new Date(), 1); // add timestamp in cookie again 
    }); 

}); 

// create or get the cookie 
function createOrGetCookieTime() { 

    var timeCookie=RegExp(""+time+"[^;]+").exec(document.cookie); 
    if(!!timeCookie){ 
     return +decodeURIComponent(timeCookie.toString().replace(/^[^=]+./,"")); // get last timestamp 
    }else{ 
     setCookie("time", +new Date(), 1); // add timestamp in cookie 
     return 0; 
    } 
} 


</script>

來源

2017-10-28 08:28:29 pirs

JQuery的落後定時器不應在頁面刷新停止（倒計時）

回答

相關問題