jQuery hsCountdown returns 某些数字的值错误
jQuery hsCountdown returns wrong values for some numbers
我使用重写的 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, "" + 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>
问题在于这些行:
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, "" + 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);
我使用重写的 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, "" + 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>
问题在于这些行:
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, "" + 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);