JavaScript animated counter with fixed number of decimal places

Question

I downloaded a jQuery animated number counter. It counts from 0 to infinity normally, but now I want to count from 0.0000 to infinity. However, I discovered that when it gets to 0.01223 , it extends to 0.12239999999999 and keeps increasing.

I want it to be fixed to 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. Is there a way to make it continue the counting even if the user closes the page?

Answer 1

The trick to this is toFixed() , which you can use to ensure that it only ever uses four decimal places. This is done with nb_start.toFixed(4) when writing to the page.

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:

 $('#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 . Store the variables at the desired point with 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'); .

Hope this helps! :)