Question

I am creating an app with Phonegap and JQuery Mobile and have a particular scenario where I need to format a particular counter.

Basically the counter starts from 1 and keeps increasing showing the distance travelled. However, in order to display it I need to display them as 0001 then once an event is triggered it goes to 0002 …. 0099… 0999… 9999 (max).

The issue is that when the distance travelled is less than 1KM, I need to show the decimal point. Therefore since I am limited to show the 4 digits, I need to show the distance as:
0.250KM (which would be equivalent to 250m).

Can anyone tell me how I can achieve this so that once the number is less than 1, it shows up as for example 0.005 then 0.025, then 0.250, until it hits 0.999 which then it would round to 0001.

At the moment I had this setup:

var newDist = Math.round((geoLocationHandler.distance/1000)); // shows distance in KM
var distance = parseInt($('.distanceTravelled').text(), 10);
$('.distanceTravelled').text(("000"+ (distance+newDist)).slice(-4)); 

And HTML

<span class="distanceTravelled">0000</span>km

Answer 1

Try this:

function padNumber(number, padding, length) {
    var string = (Math.round( number * 1000 ) / 1000)+ '';
    if(number < 1 && number != 0){
        while (string.length <= length){
            string += padding;
        }
    } else {
        while (string.length < length){
            string = padding + string;
        }
    }
    return string;
}

padNumber(0.23, 0, 4);
//"0.230";
padNumber(23, 0, 4);
//"0023";
padNumber(23.5, 0, 4)
//"0024"
padNumber(0.95512154, 0, 4)
//"0.950"

Keep in mind that this doesn’t add the 'KM' suffix, yet. You could do that with:

return string + 'KM';