Question

此数字计数器持续运行，直至达到一定数量。值＆＃34;来自＆＃34;是来自mysql数据库，并且在每4秒内该数字将被添加1.但是这个添加的数字只是一个虚拟数据，它不会保存在数据库中。

我尝试使用localStorage重新加载浏览器页面后保持当前的数量，但我没有运气存储它。我想在特定时间内在localStorage中计数时保存该号码，例如从每天早上9点到晚上7点。

编辑：有一种方法，即使没有用户查看该页面，计数器也会每4秒连续添加一次？因此，数字计数器的值在每个设备中都是同步的

能帮助你实现这一目标吗？在不同设备浏览器中同步值的更好方法是什么？ JS Cookies还是localStorage？ Live link

var curr_date        = new Date();
var current_time     = curr_date.getTime()/1000;
var current_hour     = curr_date.getHours();
var current_minutes  = curr_date.getMinutes();
var current_seconds  = curr_date.getSeconds();
var curr_time        = current_hour + ":" + current_minutes + ":" + current_seconds;
//var initial_time = 1492681140 //1488333600; //1488326400
var initial_time     = curr_date.getTime()/1000;
var target_time      = 1512136800; //1498917600; //1498860000
var speed            = 60*60*24*12*30*7*2;
var current_data     = 800000 + (current_time - initial_time)/(target_time - initial_time) * 250000;

switch((new Date).getTime()){
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
}

(function($){
    $.fn.countTo = function (options){
        options = options || {};

        return $(this).each(function (){
            //set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults,{
                from: $(this).data('from'),
                to: $(this).data('to'),
                speed: $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals: $(this).data('decimals')
            }, options);

            var loops = Math.ceil(settings.speed / settings.refreshInterval),
            increment = (settings.to - settings.from) / loops; //how many times to update the value, and how much to increment the value on each update

            //references & variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};
                $self.data('countTo', data);

            //if an existing interval can be found, clear it first
            if (data.interval){
                clearInterval(data.interval);
            }

            data.interval = setInterval(updateTimer, settings.refreshInterval);
            render(value); 

            function updateTimer(){
                value += increment;
                loopCount++;
                render(value);
                  if (typeof(settings.onUpdate) == 'function'){
                    settings.onUpdate.call(self, value);
                  }

                if (loopCount >= loops){
                    //remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;

                    if(typeof(settings.onComplete) == 'function'){
                        settings.onComplete.call(self, value);
                    }
                }
            }

            function render(value){
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
                $self.html(value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ' '));
            }
        });
    };

    $.fn.countTo.defaults ={
        from: 0,               
        to: 0,                 
        speed: 400,            
        refreshInterval: 1000,  
        decimals: 0,           
        formatter: formatter,  
        onUpdate: null,       
        onComplete: null       
    };

    function formatter(value, settings){
        return value.toFixed(settings.decimals);
    }

    //custom formatting example
    $('.count-number').data('countToOptions',{
        formatter: function (value, options){
           return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
        }
    });

    $('.timer').each(count); //start all the timers
    function count(options){
        var $this = $(this);
        options = $.extend({}, options || {}, $this.data('countToOptions') || {});
        $this.countTo(options);
    }

    if(curr_time >= '10:00:00' && curr_time <= '22:00:00'){
        $('.timer').countTo({
            from: current_data,
            to: 1000000,                         
            speed: speed,
            refreshInterval: 1000,
            onUpdate: function(value){
                console.debug(this);
            },
            onComplete: function(value){
                console.debug(this);
            }
        });
    } else if(curr_time >= '22:00:01' && curr_time <= '9:59:59'){
        $('.timer').countTo({
            from: 800000,
            to: 800000
        });
    }
}(jQuery));

Answer 1

我没有看到任何localstorage代码，但您想要做的是，当页面再次加载时，而不是从800000 + .....开始current_data，检查是否localstorage值可用并改为使用。

像这样更新实施

var current_data = 0;

if (localStorage.getItem("myCounterValue") != undefined) {
  current_data = parseFloat(localStorage.getItem("myCounterValue"));
} else {
  current_data =
    800000 +
    (current_time - initial_time) / (target_time - initial_time) * 250000;
}

在update例程

中设置存储值

$(".timer").countTo({
    from: current_data,
    to: 1000000,
    speed: speed,
    refreshInterval: 1000,
    onUpdate: function (value) {
        //console.debug(value);
        localStorage.setItem("myCounterValue", value);
    },
    onComplete: function (value) {
        console.debug(this);
    }
});

这应该保存并加载最后一次计数。让我们知道。

浏览器刷新后如何使用JQuery保持当前数量？

1 个答案: