在页面刷新期间保存计数器值

时间:2013-08-30 17:50:00

标签: php javascript html

我想每2.7秒为一个值加1;每次刷新页面时,我都重置它

有没有办法扩充以下代码才能实现这一目标?我对php一无所知,而且JS也很少,但我想学习php,我觉得它可能是一个解决方案。

这是计数器的行。

<span id="counter" class="bladeometer" style="letter-spacing: 3px;">198567970</span>

这是适用它的代码。

var timer;


function startCount()
{
timer = setInterval(count,2700);
}
function count()
{
var el = document.getElementById('counter');
var currentNumber = parseFloat(el.innerHTML);
el.innerHTML = currentNumber+1;

}

4 个答案:

答案 0 :(得分:1)

您可以使用服务器发送的事件。以下是解释和示例http://www.html5rocks.com/en/tutorials/eventsource/basics/

答案 1 :(得分:1)

我假设你希望这个计数器是全局的,而不是每个用户。 你所展示的方法并不好。如果您使用AJAX或其他一些存储值的方法,它可能会有效,但这不是必需的。事实上,我认为这是一个愚蠢的解决方案。

由于计数器不断增加,您需要找到始终存在的东西,并且可以从中计算计数器值。我当然在谈论时间

弄清楚你的计数器什么时候都是零。把它作为你的参考时间。现在,每次打开页面时,都会使用(current time - reference time) * increase value计算计数器,因此增加值为1 / 2.7(感谢Matthew),公式为(current time in seconds - reference time in seconds) / 2.7),您就可以了!这是您的计数器在每次加载页面时所需要的价值。

这样,您的代码将在页面上实时更新计数器,而我给出的时间计算将确保计数器编号在“窗帘后面”是正确的,这样当您刷新页面时,您将得到相同的如果你一直在页面上,你会得到的价值。只需确保使用一个时区并坚持使用它,以避免来自不同区域的用户具有不同的计数器值(略有不同,但仍然不需要)。

底线使用您的代码在页面上实时更新计数器并使用我显示的内容来确定页面加载时计数器的起始值

答案 2 :(得分:0)

localStorage允许您在每台计算机的基础上加载数据

// load the time from what was saved, or if absent, pick 0
var time = localStorage['timer'] || 0;
var el = document.getElementById('counter');

var timerId;

function startCount() {
    timerId = setInterval(function() {
        time = time + 1;
        localStorage['timer'] = time;
        el.textContent = time;
    }, 2700);
}

答案 3 :(得分:0)

这可以通过Javascript纯粹实现。它会在页面刷新后保持同步,对于访问该网站的所有用户来说都是一样的。

var el = document.getElementById('counter');
//Set the date of when it starts to February 3rd, 2013. Javascript counts months from 0-11
var startTime = Math.floor(new Date(2013, 1, 3) / 1000);
var startNumber = 200000000;

var timer = setInterval(function() {
    var currentTime = Math.floor(new Date() / 1000);
    var secondsSinceStart = currentTime - startTime;

    el.innerHTML = Math.floor(startNumber + (secondsSinceStart / 2.7));
}, 2700);

它的工作方式是计算自计数器启动以来经过的秒数,并将其除以2.7以查看计数器的值应该是多少。我使用Math.floor(),以便计数器中的数字是一个整数。

Date.time()所做的是获得自大纪元以来的毫秒数(你可以阅读它 http://en.m.wikipedia.org/wiki/Epoch_(reference_date))。 我将它除以1000以获得自Epoch以来的秒数然后我将其放置以使得数字是整数。

如果您需要任何帮助,请随时询问。

演示:http://codepen.io/skimberk1/pen/dbf41f6dae413a39bd05650ef8796319