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

Javascript 如何在站点上实现实时和持久的数字计数器,javascript,jquery,Javascript,Jquery,我有个客户在回收罐头。我们正在为他们开发一个新的网站,他们希望在他们的网站上有一个实时的“罐头加工”柜台。起始数字(因为它们已经运行了一段时间)将在50000000左右,并且没有结束数字 为了获得“处理率”,我们可以平均出每年处理的罐头数量,并得到一个时间估计值,如“每10秒1罐”。但是我如何实现一个“持久”计数器,使计数器不会在页面加载/刷新时从设置值开始滴答作响 我是javascript和jQuery的初学者,但我确实理解编程概念和基本原理,我可以阅读脚本并了解发生了什么。如果有任何想法或建

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

为了获得“处理率”,我们可以平均出每年处理的罐头数量,并得到一个时间估计值,如“每10秒1罐”。但是我如何实现一个“持久”计数器,使计数器不会在页面加载/刷新时从设置值开始滴答作响


我是javascript和jQuery的初学者,但我确实理解编程概念和基本原理,我可以阅读脚本并了解发生了什么。如果有任何想法或建议,我将不胜感激。

我想我会接受您的建议

var msecs = (new Date()).getTime();
然后用它来计算罐头的数量

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

以今年年初为例:

var start = new Date(2011, 0, 1); // Note the 0!
var cans = Math.floor(elapsed * rate);
计算经过的时间:

var elapsed = new Date() - start; // In milliseconds
假设您的速率为每10秒1罐:

var rate = 1 / 10 / 1000; // Cans per millisecond
计算自今年年初以来已处理的罐头数量:

var start = new Date(2011, 0, 1); // Note the 0!
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


一种优化方法可以使您的更新间隔与已知的速率保持一致,但最好将您的演示文稿更新与速率信息分离。

非常感谢为我们这些新手提供易于理解的代码@大卫:我的荣幸:)@Ates Goral我想每30秒增加一罐,我会把它的速度放在多少?我对你用
1/10/1000
@kiddmond做的事情有点不知所措,1秒是1000毫秒,10秒是10*1000毫秒
1/10/1000
是一种懒洋洋的说法
1/(10*1000)
。因此,如果你每30秒需要一个罐头,那就是
1/(30*1000)
(1/30/1000)
。啊哈,这是有道理的。:)