运行 网站上显示的计数器
Run a counter that is displayed on website
我想运行在一个网站的后台做一个计数器,让它一直在计数。我制作了一个 javascript 计数器 (http://directinvent.com/counter/) 来显示所需的结果,尽管每当为每个用户加载站点时它都会重置。
这个想法很简单。 运行 计数器后端并在前端实时显示结果。关于如何做到这一点有什么想法吗?
计数器必须存储在后端(文件或数据库中),可以是单个计数器或每个用户一个计数器。
呈现页面时,首先显示从后端读取的计数器。
如果计数器的速度已知且恒定(例如每秒增加3),则可以使用javascript(setTimeout
)来每秒增加一次。后端将存储一个数字和创建时间(unix 时间),例如120 在 08:00:00。如果用户在 09:00:15 访问该网站,您知道现在是 3615 秒后,因此您渲染显示起始计数器的初始页面为 120 + (3615/3) = 1325。之后, javascript 将以每秒 3 的速度递增并显示。
如果计数器的速度未知,那么您需要定期(例如每 10 秒一次)通过 ajax 向后端检查,请求当前计数器的值。您可以立即显示最新值(这意味着计数器将每 10 秒更新一次)。 或者,如果想给人一种"live"的感觉,可以在客户端用动画增量显示。
示例:当前显示屏显示 120。十秒后,通过 ajax 请求您获得一个新值 150。差异是 150-120 = 10 秒内的 30。您可以显示计数器每秒增加 3 个(120、123、126、129、132、135、138、141、144、147、150)。也可以玩随机增量更逼真,只要10秒内总增量为30即可。
与您在 Javascript 中使用计时器的方式相同。当你开始你的柜台时你存储。然后在每次更新(请求)时重新计算结果。无需每 1/10 秒计算一次。如果没有人问,这个也没用。
基本上,这看起来像这样:
long startTime = storeTimeFor(User);
return (currentTimeInSec - startTimeInSec) * incrementationPerSec
有了这个,你只需要为每个用户存储开始时间(如果你愿意,可以存储在数据库、文件或缓存中)。重置时,只需再次存储当前时间。
这就是你在很多语言中做计时器的方式,因为每秒递增一个值(使用睡眠(1000))并不精确,因为你的线程不会一直 运行,您在机器上并不孤单 ;)
编辑:
在客户端,我不会调用太多服务器,只是询问值存储并使用相同的逻辑从客户端进行数学计算。使用超时每隔 X 毫秒一遍又一遍地进行数学计算。如果需要,请参阅Javascript中如何创建计时器,此处仅计算值会发生变化。
我通过使用 Date() 变量获取一天中的时间并将一天中的时间乘以所需的增量常量来简单地解决了这个问题。这样,该方案将根据需要每天自动更新正确的号码,并且所有用户都将在任何给定时间显示正确的号码。
function dotimer()
{
today=new Date()
window.setInterval("dotimer()",speed)
testMilli = today.getMilliseconds()
testSeconds = today.getSeconds()
testMinutes = today.getMinutes()
testHours = today.getHours()
totalCost = Math.round(testHours * 10800 + testMinutes * 180 + testSeconds * 3 + testMilli * 0.003);
document.getElementById("counterSeconds").innerHTML = totalCost;
}
虽然这是为了这个目的,但它仍然设法冻结浏览器,所以我将不得不想出一种方法来处理这个...
我想运行在一个网站的后台做一个计数器,让它一直在计数。我制作了一个 javascript 计数器 (http://directinvent.com/counter/) 来显示所需的结果,尽管每当为每个用户加载站点时它都会重置。
这个想法很简单。 运行 计数器后端并在前端实时显示结果。关于如何做到这一点有什么想法吗?
计数器必须存储在后端(文件或数据库中),可以是单个计数器或每个用户一个计数器。
呈现页面时,首先显示从后端读取的计数器。
如果计数器的速度已知且恒定(例如每秒增加3),则可以使用javascript(setTimeout
)来每秒增加一次。后端将存储一个数字和创建时间(unix 时间),例如120 在 08:00:00。如果用户在 09:00:15 访问该网站,您知道现在是 3615 秒后,因此您渲染显示起始计数器的初始页面为 120 + (3615/3) = 1325。之后, javascript 将以每秒 3 的速度递增并显示。
如果计数器的速度未知,那么您需要定期(例如每 10 秒一次)通过 ajax 向后端检查,请求当前计数器的值。您可以立即显示最新值(这意味着计数器将每 10 秒更新一次)。 或者,如果想给人一种"live"的感觉,可以在客户端用动画增量显示。 示例:当前显示屏显示 120。十秒后,通过 ajax 请求您获得一个新值 150。差异是 150-120 = 10 秒内的 30。您可以显示计数器每秒增加 3 个(120、123、126、129、132、135、138、141、144、147、150)。也可以玩随机增量更逼真,只要10秒内总增量为30即可。
与您在 Javascript 中使用计时器的方式相同。当你开始你的柜台时你存储。然后在每次更新(请求)时重新计算结果。无需每 1/10 秒计算一次。如果没有人问,这个也没用。
基本上,这看起来像这样:
long startTime = storeTimeFor(User);
return (currentTimeInSec - startTimeInSec) * incrementationPerSec
有了这个,你只需要为每个用户存储开始时间(如果你愿意,可以存储在数据库、文件或缓存中)。重置时,只需再次存储当前时间。
这就是你在很多语言中做计时器的方式,因为每秒递增一个值(使用睡眠(1000))并不精确,因为你的线程不会一直 运行,您在机器上并不孤单 ;)
编辑:
在客户端,我不会调用太多服务器,只是询问值存储并使用相同的逻辑从客户端进行数学计算。使用超时每隔 X 毫秒一遍又一遍地进行数学计算。如果需要,请参阅Javascript中如何创建计时器,此处仅计算值会发生变化。
我通过使用 Date() 变量获取一天中的时间并将一天中的时间乘以所需的增量常量来简单地解决了这个问题。这样,该方案将根据需要每天自动更新正确的号码,并且所有用户都将在任何给定时间显示正确的号码。
function dotimer()
{
today=new Date()
window.setInterval("dotimer()",speed)
testMilli = today.getMilliseconds()
testSeconds = today.getSeconds()
testMinutes = today.getMinutes()
testHours = today.getHours()
totalCost = Math.round(testHours * 10800 + testMinutes * 180 + testSeconds * 3 + testMilli * 0.003);
document.getElementById("counterSeconds").innerHTML = totalCost;
}
虽然这是为了这个目的,但它仍然设法冻结浏览器,所以我将不得不想出一种方法来处理这个...