2017-10-10 89 views
0

我用rewrited hsCountdown库返回错误的值和一些数字就显示错误的价值观:我上面规定的“130”为增量
在示例,但hsCountdown它仅增大至125 为什么?jQuery的hsCountdown的一些数字

我被调试为“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; 
 

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

 
\t \t \t \t \t return (currentIncrement <= realMaxNumber) 
 
\t \t \t \t \t 
 
\t \t \t \t \t ? 
 
\t \t \t \t \t 
 
\t \t \t \t \t (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))) 
 
\t \t \t \t \t 
 
\t \t \t \t \t : 
 
\t \t \t \t \t 
 
\t \t \t \t \t (start = numb, !0); 
 
\t \t \t \t }, 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>

+0

你最好让你的代码干净第一,然后才拿出来给我们。这是几乎不可能读...阅读关于吻)) –

+0

什么是难以阅读,例如? – bars96

+0

例如,变量名称。对不起,如果我伤害你的感受。我不打算这样做 –

回答

1

问题依赖于这些行:

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,这是二十五分之一百三十零= 5.2。然后,t是实际上将l - n = 130 - 5.2 = 124.8,这就是为什么它数到125,而不是30

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

编辑:

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

+0

非常感谢 – bars96

0

固定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);