Jquery：使用计数器显示折扣答案

【问题标题】：Jquery: Use a counter to show a discountJquery：使用计数器显示折扣
【发布时间】：2013-07-04 18:09:50
【问题描述】：

我在 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>

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

我发现了这个example 如何使用 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);
            }
        });

    });
});

HERE IS JSFIDDLE

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我会做这样的事情：

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);
                }
        });
    });
});

FIDDLE

【讨论】：

【解决方案2】：

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

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

jsFiddle

【讨论】：