javascript - jQuery hsCountdown 返回某些数字的错误值

Question

我使用重写的 hsCountdown 库，对于某些数字，它显示错误的值:
在上面的示例中，我指定“130”作为增量，但 hsCountdown 仅将其增量到 125。为什么？

我正在调试“r”变量(位于#debug_console的行上)，你的意思是什么？这个变量神奇地不是按整数递增，而是按 float 递增。
例如，54.0000000001而不是54。JavaScript，你醉了!

(function(a) {
    "use strict";
    a.fn.hsCounter = function(b) {
        var c = a.extend({
            delay: 50,
            signPos: "after",
            classVisible: "countup-vis",
            decimalSeparator: ".",
            orderSeparator: " "
        }, b);
        return this.each(function() {
            b && a.extend(c, b);
            var timer, num, line, content, self = a(this),
                win = a(window),
                winTop = win.scrollTop(),
                winHeight = win.height(),
                numb = self.data("num"),
                increment = self.data("increment") ? self.data("increment") : (numb / 25 > 1.0 ? numb / 25 : 1.0),
                fractional = self.data("fractional") ? self.data("fractional") : 0,
                sign = self.data("sign") ? self.data("sign") : "",
                regExp = /(\d)(?=(\d\d\d)+([^\d]|$))/g,
                start = self.data("start") ? +self.data("start") : 0,
                amount = a(".countup-amount"),
                realMaxNumber = numb - increment;

				winTop <= self.offset().top && winTop + winHeight >= self.offset().top && (timer = setTimeout(function u() {
					var currentIncrement = (fractional > 0 ? start.toFixed(fractional) : start);
					$('#debug_console').append('[Condition debug] (currentIncrement <= realMaxNumber) equals ('+currentIncrement+' <= '+realMaxNumber+')<br>');

					return (currentIncrement <= realMaxNumber)
					
					?
					
					(start += increment, num = start.toFixed(fractional).replace(".", c.decimalSeparator).replace(regExp, "$1" + c.orderSeparator), content = self.find(amount).html(num), "after" == c.signPos ? self.html('<span class="countup-amount">' + num + '</span><span class="countup-sign">' + sign + "</span>") : "before" == c.signPos && self.html('<span class="countup-sign">' + sign + '</span><span class="countup-amount">' + num + "</span>"), self.hasClass("progress-up") && (self.html(self.html() + "<ins/>"), self.find("ins").css("width", start + "%")), self.parent().hasClass("countup-wrap") && (line = self.parent().find(".countup-line"), line.css("width", start + "%")), void(timer = setTimeout(u, c.delay)))
					
					:
					
					(start = numb, !0);
				}, c.delay));
        });
    }
})(jQuery);

function initCounter(a, b) { b ? a.hsCounter() : a.text("0"); }

initCounter($(".counterup"), 1);

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<h1 class="counterup js" data-num="130">...</h1>

<div id="debug_console"></div>

Answer 1

问题在于以下几行:

n = h.data("增量") ? h.data(“增量”): (l/25 > 1.0 ? l/25 : 1.0),
和 t = l - n;

t 基本上是此代码将计算到的数字。 t 的计算方式为 l(即 data-num 属性，在本例中为 130 减去 n，即派生自 data-increment 属性。

如您所见，您没有提供data-increment，代码默认为l/25，即130/25 = 5.2。那么，t 实际上将是 l - n = 130 - 5.2 = 124.8，这就是为什么它计数为 125 而不是 30。

一个简单的解决方案是将 data-increment="1" 添加到您的 h1 标记中。您也可以考虑更改 n 变量的默认计算。

编辑:

我看到您编辑了代码，这很棒，因为它更容易调试。我认为解决方案应该是将这一行: (start = numb, !0); 更改为这样的内容: self.find(".countup-amount").html(numb ); 这基本上意味着如果当前数字 + 增量值大于目标值，则意味着这是最后一步，我们可以简单地用目标值填充我们的 span .