如何使计数器在指定日期不断增加到某个数字？

Posted 2023-05-08

【中文标题】如何使计数器在指定日期不断增加到某个数字？

【英文标题】：How can I make a counter keep increasing to a certain number on a specified date?

【发布时间】：2022-01-20 06:12:00

【问题描述】：

我想为我的网站创建一个计数器，该计数器增加到一个数字，但在一年后达到该数字。

例如，计数器从 0 开始，其目标数为 35340340，因此计数器应在一年后达到该数。

我一直在尝试，我可以创建一个动画计数器，它需要 31,556,900,000 毫秒才能达到其目标数字，但每次加载页面时它都会重置为 0，所以我不知道是否可以指示日期，因为它使用停机时间计数器完成，但使用上升的计数器而不是基于秒和分钟。

【问题讨论】：

您必须从特定日期开始计算经过的时间

您创建的计数器是您网站的本地计数器，每次加载页面时都会重置。要获得真实的日期时间，您必须有一个后端，您可以从中获取开始和结束日期，并使用这些值计算计数器应该增加/减少的速率。

这是在计算秒数、分钟数还是其他单位时间？它应该从硬编码的日期/时间开始计算，还是不同的访问者可以有不同的计数器？那是当地时间，还是每个人的计数都应该相同，无论他们的时区如何？当计数器到达目标数量时，网页应该发生什么？

【参考方案1】：

你知道什么时候设置计数器

所以你可以在每次加载时进行这个计算

注意，如果在特定时间达到数字很重要，则需要考虑时区

const targetNumber = 35340340;
const speed = 100; // milliseconds
const startDate = new Date(2021,11,16,15,0,0,0); // normalise at 15:00 - here yesterday
const aYearLater = new Date(startDate.getFullYear()+1,startDate.getMonth(),startDate.getDate(),15,0,0,0); 
const diffMS = aYearLater.getTime() - startDate.getTime(); // 365 or 366 in ms
const ticksPerMS = targetNumber/diffMS;
// console.log(ticksPerMS); 
const now = new Date();
const diffFromStart = now.getTime() - startDate.getTime();
let counterNow = (diffFromStart*ticksPerMS)
const counter = document.getElementById("counter");
setInterval(function() 
  counter.innerText = (counterNow += (ticksPerMS*speed)).toFixed(2)
,speed)

<span id="counter"></span>

更新您的评论

const initialNumber = 99.990867579909;
const targetFinal = 100.000000000000;
const targetNumber = targetFinal - initialNumber;


const speed = 100; // milliseconds
const startDate = new Date(2021, 11, 16, 15, 0, 0, 0); // normalise at 15:00 - here yesterday
const aYearLater = new Date(startDate.getFullYear() + 1, startDate.getMonth(), startDate.getDate(), 15, 0, 0, 0);
const diffMS = aYearLater.getTime() - startDate.getTime(); // 365 or 366 in ms
const ticksPerMS = targetNumber / diffMS;
// console.log(ticksPerMS); 
const now = new Date();
const diffFromStart = now.getTime() - startDate.getTime();
let counterNow = (diffFromStart * ticksPerMS)
const counter = document.getElementById("counter");
let tId = setInterval(function() 
  counter.innerText = (counterNow += (ticksPerMS * speed)).toFixed(12)
  if (counterNow >= targetFinal) clearInterval(tId);
, speed)

<span id="counter"></span>

【讨论】：

请注意，不同时区的访问者会看到不同的计数。那是因为计数是从当地时间 15:00 开始的。

这将是每小时 70 个滴答声的差异，即 0.01‱，还是这样？我想我不需要那么规范化

OP 没有提到计数器应该在一天中的什么时候达到这个数字

只是指出美国网站访问者将在欧洲用户之后到达目标时间。当你数着庆祝新年时这没关系，但当你数着月食时就不行了。应该让那些愿意复制/粘贴代码 sn-p 的人明白这一点，盲目地假设它适合他们的用例。

如果我想使用小数怎么办？