[英]JavaScript animated counter with fixed number of decimal places
I downloaded a jQuery animated number counter. 我下载了一个jQuery动画数字计数器。 It counts from
0
to infinity normally, but now I want to count from 0.0000
to infinity. 通常从
0
到无穷大,但现在我要从0.0000
到无穷大。 However, I discovered that when it gets to 0.01223
, it extends to 0.12239999999999
and keeps increasing. 但是,我发现当达到
0.01223
,它会扩展到0.12239999999999
并不断增加。
I want it to be fixed to 0.0000
. 我希望将其固定为
0.0000
。 That's all. 就这样。
$('#counter-block').ready(function() { $('.fb').animationCounter({ start: 0, step: 1, delay: 100 }); $('.bike').animationCounter({ start: 0.0100, step: 0.00005, delay: 2200, txt: ' BTC' }); $('.code').animationCounter({ start: 0, end: 570, step: 4, delay: 1000 }); $('.coffee').animationCounter({ start: 490, end: 1560, step: 20, delay: 900, txt: ' cl' }); }); (function($) { $.fn.animationCounter = function(options) { return this.each(function() { try { var element = $(this); var defaults = { start: 0, end: null, step: 1, delay: 1000, txt: "" } var settings = $.extend(defaults, options || {}) var nb_start = settings.start; var nb_end = settings.end; element.text(nb_start + settings.txt); var counter = function() { // Definition of conditions of arrest if (nb_end != null && nb_start >= nb_end) { return; } // incrementation nb_start = nb_start + settings.step; // display element.text(nb_start + settings.txt); } // Timer // Launches every "settings.delay" setInterval(counter, settings.delay); } catch (e) { alert(e + ' at line ' + e.lineNumber); } }); }; })(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="intro"> <h1 class="title-plugin">animationCounter.js</h1> </div> <div class="block-wrapper"> <div class="block"> <p><span class="lnr lnr-heart"></span></p> <p class="counter-wrapper"><span class="fb"></span></p> <p class="text-block">like</p> </div> <div class="block"> <p><span class="lnr lnr-code"></span></p> <p class="counter-wrapper"><span class="code"></span></p> <p class="text-block">code</p> </div> <div class="block"> <p><span class="lnr lnr-bicycle"></span></p> <p class="counter-wrapper"><span class="bike"></span></p> <p class="text-block">bicycle</p> </div> <div class="block"> <p><span class="lnr lnr-history"></span></p> <p class="counter-wrapper"><span class="coffee"></span></p> <p class="text-block">coffee</p> </div> </div> <footer> <p>Copyright (c) 2017 <a href="http://www.pixel-renaissance.com">Micheline Pavadé</a></p> </footer> </div>
If I refresh the page the number starts from 0
back again. 如果刷新页面,数字将从
0
重新开始。 Is there a way to make it continue the counting even if the user closes the page? 有没有办法使它即使用户关闭页面也能继续计数?
The trick to this is toFixed() , which you can use to ensure that it only ever uses four decimal places. 技巧是toFixed() ,您可以使用它来确保它只使用四个小数位。 This is done with
nb_start.toFixed(4)
when writing to the page. 写入页面时使用
nb_start.toFixed(4)
完成。
Note that you'll probably not want to use toFixed()
if the number is greater than one, so I wrap it in an if/else
conditional in my following example: 请注意,如果数字大于一,您可能不希望使用
toFixed()
,因此在以下示例中,将其包装在if/else
条件中:
$('#counter-block').ready(function() { $('.fb').animationCounter({ start: 0, step: 1, delay: 100 }); $('.bike').animationCounter({ start: 0.0100, step: 0.00005, delay: 2200, txt: ' BTC' }); $('.code').animationCounter({ start: 0, end: 570, step: 4, delay: 1000 }); $('.coffee').animationCounter({ start: 490, end: 1560, step: 20, delay: 900, txt: ' cl' }); }); (function($) { $.fn.animationCounter = function(options) { return this.each(function() { try { var element = $(this); var defaults = { start: 0, end: null, step: 1, delay: 1000, txt: "" } var settings = $.extend(defaults, options || {}) var nb_start = settings.start; var nb_end = settings.end; element.text(nb_start + settings.txt); var counter = function() { // Definition of conditions of arrest if (nb_end != null && nb_start >= nb_end) { return; } // incrementation nb_start = nb_start + settings.step; // display if (nb_start < 1) { element.text(nb_start.toFixed(4) + settings.txt); } else { element.text(nb_start + settings.txt); } } // Timer // Launches every "settings.delay" setInterval(counter, settings.delay); } catch (e) { alert(e + ' at line ' + e.lineNumber); } }); }; })(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="intro"> <h1 class="title-plugin">animationCounter.js</h1> </div> <div class="block-wrapper"> <div class="block"> <p><span class="lnr lnr-heart"></span></p> <p class="counter-wrapper"><span class="fb"></span></p> <p class="text-block">like</p> </div> <div class="block"> <p><span class="lnr lnr-code"></span></p> <p class="counter-wrapper"><span class="code"></span></p> <p class="text-block">code</p> </div> <div class="block"> <p><span class="lnr lnr-bicycle"></span></p> <p class="counter-wrapper"><span class="bike"></span></p> <p class="text-block">bicycle</p> </div> <div class="block"> <p><span class="lnr lnr-history"></span></p> <p class="counter-wrapper"><span class="coffee"></span></p> <p class="text-block">coffee</p> </div> </div> <footer> <p>Copyright (c) 2017 <a href="http://www.pixel-renaissance.com">Micheline Pavadé</a></p> </footer> </div>
To store the value so that the user doesn't have to refresh the page, you're looking for either cookies , or preferably, localStorage . 为了存储该值,以便用户不必刷新页面,您正在寻找cookie ,或者最好是localStorage 。 Store the variables at the desired point with
localStorage.setItem('variable', 'value');
使用
localStorage.setItem('variable', 'value');
将变量存储在所需的位置 , and then set the variables as the values stored in localStorage when the user visit the page again: var stored_value = localStorage.getItem('variable');
,然后在用户再次访问页面时将变量设置为存储在localStorage中的值:
var stored_value = localStorage.getItem('variable');
. 。
Hope this helps! 希望这可以帮助! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.