如何在站点上实现实时和持久的数字计数器答案

【问题标题】：How to implement a live and persistent number counter on a site如何在站点上实现实时和持久的数字计数器
【发布时间】：2011-02-02 20:34:54
【问题描述】：

我有一个回收罐头的客户。我们正在为他们开发一个新网站，他们希望在他们的网站上有一个实时的“罐头加工”柜台。起始数字（因为它们已经运行了一段时间）将在 50,000,000 左右，并且没有结束数字。

要获得“加工率”，我们可以平均每年加工的罐头数量，并获得时间估计值，例如“每 10 秒 1 罐”。但是我将如何实现“持久”计数器，以便计数器不会在页面加载/刷新时从设定值开始计时？

我是 javascript 和 jQuery 的初学者，但我确实了解编程概念和基础知识，而且我可以阅读脚本并弄清楚发生了什么。任何想法或建议将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

以今年年初为例：

var start = new Date(2011, 0, 1); // Note the 0!

计算已经过去了多少时间：

var elapsed = new Date() - start; // In milliseconds

假设您的费率为每 10 秒 1 罐：

var rate = 1 / 10 / 1000; // Cans per millisecond

计算自今年年初以来已处理了多少罐：

var cans = Math.floor(elapsed * rate);

所以，一个简单的设置可能是：

var start = new Date(2011, 0, 1);
var rate = 1 / 10 / 1000;
var base = 50000000;

setInterval(function () {
    var cans = Math.floor((new Date() - start) * rate) + base;
    $("#cans").text(cans); // I hope you're using jQuery
}, 5000); // update every 5 seconds -- pick anything you like; won't affect result

http://jsfiddle.net/eKDXB/

优化可能是让您的更新间隔与已知速率保持一致，但最好让您的演示文稿更新与速率信息脱钩。

【讨论】：

非常感谢为我们新手提供易于理解的代码！
@David 我的荣幸 :)
@Ates Goral 我希望每 30 秒添加 1 个罐头，我会设置多少作为费率？我对你对 1 / 10 / 1000 所做的事情有点迷茫。
@KidDiamond 1 秒是 1000 毫秒，10 秒是 10 * 1000 毫秒。 1 / 10 / 1000 是一种懒惰的说法 1 / (10 * 1000)。所以，如果你每 30 秒需要一个罐子，那就是 1 / (30 * 1000) 或 (1 / 30 / 1000)。
啊哈，说得有道理。 :)

【解决方案2】：

我想我会得到当前的时代

var msecs = (new Date()).getTime();

然后计算罐头的数量使用

var total_number = base_number + (msecs - start_date) / msecs_per_can;

【讨论】：