1

我在 HTML 中列出了两个价格。一个是总价，另一个是折扣价（折扣价是加了折扣的总价）：

 <ul>
<li class="discounted-price">180.99</li>
<li class="special">Grand Total: £<b id="price">186.95</b></li>
</ul>

<a class="trigger" href="#">Link</a>

当用户点击链接时，我希望总价的数字“向下滚动”（例如收银机）到折扣价的值。

我找到了如何使用 Jquery 实现它的示例。但是，在示例中，他们的示例不是价格，因此有许多用逗号分隔的数字。

我试图删除所有不必要的代码，但现在我的价格如下所示：180.99008006406564

我怎样才能将我的价格限制在小数点后两位。我知道 Javascript 有一个用于控制小数位的tofixed()工具，但我似乎无法在不破坏动画的情况下让它在我的代码中工作。

这是我的代码：

$(document).ready(function () {

    // Animate the element's value from x to y:
    $('.trigger').live('click', function () {
        var originalprice = $('#price').text();
        var discount = $('.discounted-price').text();

        $({
            someValue: originalprice
        }).animate({
            someValue: discount
        }, {
            duration: 3000,
            easing: 'swing',
            // can be anything
            step: function () {
                $('#price').text(this.someValue);
            }
        });

    });
});

这是 JSFIDDLE

4

2 回答 2

2

我会做这样的事情：

jQuery(function($) {
    $(document).on('click', '.trigger', function () {
        var originalprice = parseFloat($('#price').text()),
            discount      = parseFloat($('.discounted-price').text());

        $({someValue: originalprice})
            .animate({
                someValue: discount
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $('#price').text( parseInt((now * 100),10) / 100);
                }
        });
    });
});

小提琴

于 2013-07-04T18:19:17.303 回答
1

step在回调中使用这种方法：

$('#price').text(parseFloat(this.someValue).toFixed(2));

jsFiddle

于 2013-07-04T18:12:41.393 回答