Question

我有2个价格：

价格1：5000美元价格2：2000美元

我想要的是JavaScript来计算页面上的实时总数，所以当div加载时，它开始计算。

但我不想立即看到7000美元。我想让它“动画”结果。所以从$ 0到$ 1，$ 2，$ 3，$ 4，$ 5 ... $ 5000，$ 5001，$ 5002 ... $ 7000。

我还希望它当前添加的价格低于添加的行。

EX：

总计：$ TOTALPRICE

目前正在添加：Price1

这可能吗？如果是这样的话？

Answer 1

jQuery可以让你.animate()^Docs任意值使用now方法回调

访问当前的动画step值

var tot  = 0,
    $p1  = $("#p1"),
    $p2  = $("#p2"),
    $tot = $("#tot");

function animateTotal() {

  tot = parseFloat($p1.val()) + parseFloat($p2.val());

  $({ p: 0 }).animate({ p: tot }, {
    duration: 2000,
    easing: "swing",   // "swing" is default, you can try another easing like "linear"
    step: function (now) {
      $tot.val( now.toFixed(2) );
    }
  });

}

$p1.add($p2).on("input", animateTotal);
$p1.trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$<input value="3000.50" id="p1" name="p1">PRICE1 +<br>
$<input value="4000" id="p2" name="p1">PRICE2 =<br>
$<input value="0" readonly id="tot" name="tot">

Answer 2

小提琴在这里工作：https://jsfiddle.net/v7n7fscv/

尝试此代码您将需要一个自调用函数，因为setTimeout（）函数是非阻塞＆amp;不会阻止执行for循环：

<html>
  <head>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js
"></script>
  </head>
  <body>
    <div id="result">

    </div>
  </body>
  <script type="text/javascript">

    var a = 20;
    var b = 20;

    c = a+b;

    var counter = 0;
    (function next() {
        if (counter++ >= c) return;

        setTimeout(function() {
            $("#result").html(counter);
            next();
        }, 0.00001);
    })();

    </script>
</html>

在Javascript中创建一个花哨的价格计算？

2 个答案: