缓出计数器

Question

我有一个函数可以计算页面的访问量，并计算达到特定目标所需的剩余访问量。这就像倒计时。有一张“隐藏”的图片，每次有新的访问时，都会显示部分图片。

我有简单的 JavaScript 代码来计算访问次数，还有一些 CSS 根据百分比“揭示”图片。

但现在我需要让这个“揭幕”放慢速度，这意味着随着访问越来越接近目标，剩余图片的百分比应该减少。

现在我脑子里能想到的就是这些：

remaining_percentage_to_goal = (current_visits*100)/goal

div_height = (remaining_percentage_to_goal*image_height)/100

我可以尝试这样的事情：

slow_down_rate = 0.25 
div_height = div_height-(remaining_percentage_to_goal*slow_down_rate)

当然，这永远不会达到图像高度的 100%，所以我想到我可以使用 IF 语句或在达到一定百分比时删除 Slow_down_rate 的东西来执行硬编码的固定变量，但这似乎并不完全正确我们正在寻找的效果。所以我想知道是否有更好或更优雅的方法。

谢谢

Answer 1

听起来你想要类似对数方法的东西。为了得到这个答案，我们假设您的目标是 1500 次访问（当然，这可以是任何数字）。您知道，对于 0 次访问，您希望显示 0%，对于 1500 次访问，您希望 100% 显示，因此您知道图表上的两个点：(0,0) 和 (1500,1)。为了使自然对数适合这些参数，您必须对其进行平移和缩放，因此您有：

f(x) = alpha*ln(x+beta)

我们知道 ln(1)=0，所以 beta=1 很容易。我们还可以通过代入第二点来轻松找到 alpha：

1500 = alpha*ln(1500+1)

alpha = 1500 / ln(1500+1)

现在，如果我们将其绘制出来，我们会得到：

这看起来就像我们想要的函数……当它接近目标时它自然会减慢，但它仍然达到了目标。

将其翻译成 Javascript，你会得到：

var goal = 1500;
var alpha = goal / Math.log(goal+1);
var percentVisible = alpha * Math.log(visits+1);

我希望这有帮助！