带小数位的 Javascript 计数器

Question

I have a jsfiddle here

It's a simple javascript function that counts up to a set number.

Is it possible to do this counting but with one decimal place as well

So it count 1.1, 1.2, 1.3 etc.

    function startCounter(){
        $('.counter').each(function (index) {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration: 2000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
    }   

    startCounter();

Answer 1

Update

Check for the size of mantissa by using .split().

var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;

and then use that to estimate .toFixed() size like this

$(this).text(parseFloat(now).toFixed(size));

Here is an updated demo https://jsfiddle.net/dhirajbodicherla/wmaftobx/13/

---

Instead of Math.ceil(now) use .toFixed(1) like this

parseFloat(now).toFixed(1)

Here is the updated demo https://jsfiddle.net/wmaftobx/6/

Answer 2

This is what I did: Replace $(this).text(Math.ceil(now)) with $(this).text(Math.ceil(now)/10) and Counter: $(this).text() by Counter: $(this).text()*10 . It will increment by tenths. For each additional decimal place divide or multiply by 10.

Answer 3

change one line..

$(this).text(Math.ceil(now));

to

$(this).text(Math.round( now * 10 ) / 10);

Here is a fiddle with the updated code