jQuery hsCountdown возвращает неправильные значения для некоторых чисел

Я использую переписанную библиотеку hsCountdown и для некоторых чисел она показывает неправильные значения:
В приведенном выше примере я указал "130" для увеличения, но hsCountdown увеличивая его только до 125. Почему?

Я был отлажен для переменной "R" (в строке, где находится #debug_console) а что ты можешь иметь ввиду? Эта переменная магическим образом увеличивалась не на целое число, а на число с плавающей точкой.
Например, 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>

Источник

2 ответа

Решение

Проблема заключается в следующих строках:

n = h.data("increment") ? h.data("increment") : (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 с целевым значением.

Источник

Исправлен код JS

(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"),
                fractional = self.data("fractional") ? self.data("fractional") : 0,
                decim = fractional > 0 ? 0.5 : 1.0,
                increment = self.data("increment") ? self.data("increment") : (numb / 25 > decim ? numb / 25 : decim),
                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");

                winTop <= self.offset().top && winTop + winHeight >= self.offset().top && (timer = setTimeout(function u() {
                    if ((fractional > 0 ? start.toFixed(fractional) : start) < numb) {
                        var stin = (start + increment > numb) ? (start = numb) : (start += increment);
                        return (stin, 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)));
                    } else {
                        return (start = numb, !0);
                    }
                }, c.delay));
        });
    }
})(jQuery);

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

initCounter($(".counterup"), 1);
Источник
Другие вопросы по тегам