Question

我有一个javascript代码，它将带有类count的文本元素转换为动画计数器。

该脚本运行良好但不幸的是，它只适用于非十进制数字。

这是我的剧本：

function startCounter(){
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}
$( document ).ready(function() {
    startCounter();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="count">6.0</p>
<p class="count">600</p>

所以现在我的问题是，我怎样才能在脚本中显示十进制数？

Answer 1

您可以将Math.ceil()替换为

Math.round(num * 100) / 100

为了舍入到小数点后两位：

＆＃13;

function startCounter(){
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.round(now * 100) / 100);
            }
        });
    });
}
$( document ).ready(function() {
    startCounter();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="count">6.0</p>
<p class="count">600</p>

＆＃13;

如果您希望能够同时使用十进制和整数表示，则可以执行以下操作（此代码段也使用toFixed()代替＆＃34; 6.00＆＃34;正确）：

＆＃13;

function startCounter(){
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                var $this = $(this),
                    isFloat = !!$(this).attr('data-float');
                $this.text(isFloat ? now.toFixed(2) : Math.round(now));
            }
        });
    });
}
$( document ).ready(function() {
    startCounter();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="count" data-float="true">6.0</p>
<p class="count">600</p>

＆＃13;

Answer 2

如果你想一直保持2位小数（甚至是6.00），你可以使用toFixed(x)。它将使任何数字返回一个带有x十进制数字的字符串。

＆＃13;

function startCounter(){
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                $(this).text(now.toFixed(2));
            }
        });
    });
}
$( document ).ready(function() {
    startCounter();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="count">6.0</p>
<p class="count">600</p>

＆＃13;

如何使用小数创建反数字

2 个答案: