Question

我在jQuery中有一个简单的计数器，它从零开始，递增5.5，但它只显示没有小数点的值5。

我尝试调整正则表达式，但这不起作用。

我还需要为数字添加某种动画，而不是让它从0跳到5到10 ......我希望它随着它的增加而变得容易和计数。

HTML

<div class="label label-success count">0</div>

Javascript

function randomIntFromInterval(min,max) {
    return Math.floor(5.5);
}

$(document).ready(function() {
    setInterval(function() {
        $('.count').html(function(i, val) {
            val = val.replace(/,/g,'');
            return (parseFloat(val,10)+randomIntFromInterval(2,30000)).toString().replace(/\B(?=(^-?(?!.{12})\d+(?:\.\d+)?$))/g, ",");
        })
    }, 1000);

});

JSFiddle：https://jsfiddle.net/62vcz9qs/

Answer 1

你只获得5而不是5.5的原因是因为你专门打电话给Math.floor(5.5)而5而不是5.5如果你移除了Math.floor你的计数器将会去增加5.5。

以下是Math.floor的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

Answer 2

我做了一些非常基本的更改并删除了函数randomIntFromInterval()，因为它似乎非常不必要。我只是制作了间隔时间（1000 / 5.5）并且增量仅为1秒。

这实现了＆＃34;缓和＆＃34;你想要的动画，每秒增加5.5。

$(document).ready(function() {
setInterval(function() {
    $('.count').html(function(i, val) {
        val = val.replace(/,/g,'');
        return (parseFloat(val,10)+1).toString().replace(/\B(?=(^-?(?!.{12})\d+(?:\.\d+)?$))/g, ",");
    })
}, (1000/5.5));

}）;

在这里查看JS Fiddle：https://jsfiddle.net/62vcz9qs/2/

Answer 3

 $(document).ready(function() {
        setInterval(function() {
            $('.count').html(function(i, val) {
                val = val.replace(/,/g,'');
                return val = parseFloat(val)+5.5
            })
        }, 1000);

    });

JSFiddle：http://jsfiddle.net/dhruv1992/62vcz9qs/8/

动画增加数字并显示小数值

3 个答案: