Question

我正在尝试将计数器应用到网站中。这个柜台的目的是代表该公司提供多少石油，并按升计算。代码方面，逻辑是每秒增加两个作为升量的直观表示，让这一点工作。

我现在要做的是保存该值，以便在刷新时，或者当其他人访问该网站时，它继续从当前值而不是原始的“开始”值。我想我可能需要使用cookies，但我已经陷入了如何做到这一点，任何想法？

我已将我的代码包含在内以供参考，谢谢大家！

var gaugeStart = 320000000;
var gaugePerSecond = 2;
var gaugeInterval = 500;

var gaugeCurrent = 513637030;

$(document).ready(function() {
    $('#gaugeValue').html(commafy(gaugeCurrent));

    var tick = setInterval(function() {
        gaugeCurrent += Math.ceil((gaugeInterval/1000) * gaugePerSecond);

        $('#gaugeValue').html(commafy(gaugeCurrent));
    }, gaugeInterval);
    document.cookie = gaugeCurrent;
});

function commafy( num ) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 5) {
        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
}

https://jsfiddle.net/93byc54f/

Answer 1

如果你说的话

其他人访问该网站，

这是您需要了解的确切位置，您必须在服务器端存储此信息。

如果您只需要为单个用户执行此操作，则localStorage应该是您明显的选择。

Answer 2

使用cookie将导致每个客户端显示不同数量的升。处理此问题的最佳方法是在特定时间记录值，然后假设我们知道增量间隔 - 计算自该日期以来的差异。

    var gaugeStart = 320000000;
var gaugePerSecond = 2;
var gaugeInterval = 500;

var gaugeCurrent = 513637030;

var now = new Date();
var then = new Date("2016-01-01 00:00:00");

var secondsSince = Math.floor((now - then) / 1000);
var gaugeAmoountSince = secondsSince*4;
gaugeCurrent += gaugeAmoountSince;

$(document).ready(function() {
    $('#gaugeValue').html(commafy(gaugeCurrent));

    var tick = setInterval(function() {
        gaugeCurrent += Math.ceil((gaugeInterval/1000) * gaugePerSecond);

        $('#gaugeValue').html(commafy(gaugeCurrent));
    }, gaugeInterval);
    document.cookie = gaugeCurrent;
});

function commafy( num ) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 5) {
        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
}

https://jsfiddle.net/mb0pv4ea/

希望这有帮助。

在页面刷新 - 饼干上保存计数器的值？

2 个答案: