Counter-Up - counting starting from two zeros

Question

Currently I'm using Counter-Up jQuery plugin and I have a question. How to modify this code to get counting starting from 00, not from 0? I want to obtain a list like: 00, 01, 02 ... 10, 11, 12 etc. not 0, 1, 2 ... 10, 11, 12 etc.

00 can only be represented in javascript by using a string - rethink what you want ... you can count numbers, but you can display them how you want — Jaromanda X, Sep 02 '15 at 10:58
Okay, so how to display this additional zero when current state is less than 10?' — JaKoZo, Sep 02 '15 at 11:00
Something like `if ((num).toString().length === 1) num = '0' + num;` — Andy, Sep 02 '15 at 11:02
possible duplicate of http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript — Moishe Lipsker, Sep 02 '15 at 11:28

score 1 · Accepted Answer · answered Sep 02 '15 at 11:29

You have to modify jquery.counter.js file as below (commented with " /* Added */ ")

/*!
* jquery.counterup.js 1.0
*
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
* Released under the GPL v2 License
*
* Date: Nov 26, 2013
*/
(function( $ ){
  "use strict";

  $.fn.counterUp = function( options ) {

    // Defaults
    var settings = $.extend({
        'time': 400,
        'delay': 10
    }, options);

    return this.each(function(){

        // Store the object
        var $this = $(this);
        var $settings = settings;

        var counterUpper = function() {
            var nums = [];
            var divisions = $settings.time / $settings.delay;
            var num = $this.text();
            var isComma = /[0-9]+,[0-9]+/.test(num);
            num = num.replace(/,/g, '');
            var isInt = /^[0-9]+$/.test(num);
            var isFloat = /^[0-9]+\.[0-9]+$/.test(num);
            var decimalPlaces = isFloat ? (num.split('.')[1] || []).length : 0;

            // Generate list of incremental numbers to display
            for (var i = divisions; i >= 1; i--) {

                // Preserve as int if input was int
                var newNum = parseInt(num / divisions * i);

                // Preserve float if input was float
                if (isFloat) {
                    newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
                }

                // Preserve commas if input had commas
                if (isComma) {
                    while (/(\d+)(\d{3})/.test(newNum.toString())) {
                        newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
                    }
                }

                /* Added */
                if(newNum<10){
                    newNum = '0'+ newNum
                }
                /* Added */

                nums.unshift(newNum);
            }

            $this.data('counterup-nums', nums);
            $this.text('0');

            // Updates the number until we're done
            var f = function() {
                $this.text($this.data('counterup-nums').shift());
                if ($this.data('counterup-nums').length) {
                    setTimeout($this.data('counterup-func'), $settings.delay);
                } else {
                    delete $this.data('counterup-nums');
                    $this.data('counterup-nums', null);
                    $this.data('counterup-func', null);
                }
            };
            $this.data('counterup-func', f);

            // Start the count up
            setTimeout($this.data('counterup-func'), $settings.delay);
        };

        // Perform counts when the element gets into view
        $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
    });

  };

})( jQuery );

score 1 · Answer 2 · edited May 23 '17 at 12:22

In jquery.counterup.js file, line 62

Replace:

 $this.text($this.data('counterup-nums').shift());

With:

 $this.text(padZeros($this.data('counterup-nums').shift(),$settings.padLength||5));

Add padZero function on your app:

function padZeros(str, len){
    return Array(len-String(str).length+1).join('0')+str;
}

Usage:

$('.counter').counterUp({
    delay: 10,
    time: 2000,
    padLength: $('.counter').text().length
});

Demo

Counter-Up - counting starting from two zeros

2 Answers2