前台实现订单的动态金额计算——实时监听输入框并得到结果

实现效果：

过程：

• 点击购买按钮，出现弹框，弹框中包含订单金额和件数，订单的件数初始化为1，当金额或者数量任何一个变化，金额都会随时变化。

代码

*HTML代码：

<div class="witkey-button" onclick="BuyService()">
  <a href="#" class="webim1 webservice">购买服务</a>
 </div>

• 弹框是一个html页面：orderconfim.html
• 弹框部分代码：

<!--预算金额-->
                <div class="layui-form-item" >
                    <label class="layui-form-label">预算金额<b> *</b>：</label>
                    <input type="text" name="title" autocomplete="off"  id="budget">
                    <input type="submit" value="元"/>
                    <strong>*</strong>
                    <input type="text" name="title" autocomplete="off" id="number">
                    <input type="submit" value="件" />
                    </div>
                <!--价格总计-->
                <div class="layui-form-item priceCom ">
                    <label class="item">总计：<b class="money">3380.00</b>元</label>
                </div>

• JavaScript代码实现动态计算总金额：

//点击购买服务出现订单确认弹框
function BuyService() {
   layui.use(['form','layer','jquery'],function () {
       var form=layui.from,
           layer=layui.layer,
           $=layui.jquery;
       //获取到查询页面中服务的价格
       var price=$('.price').text();
       //设置默认购买数量为1
       var num=1;

       layer.open({
           type:2,
           content:'orderConfim.html',
           area:['760px','540px'],
           title:'购买服务',
           success:function (layero,index) {
               //页面初始化的时候，获取到页面中的服务价格和购买件数相乘得到总金额,将计算得到的总金额显示在弹框中
               sum=parseFloat(price*num);
               var count=$(layero).find("iframe").contents().find(".money").text(sum);
               //将页面中的金额和数量放到弹框中
               var budget=$(layero).find("iframe").contents().find("#budget");
               budget.val(price);
               var number=$(layero).find("iframe").contents().find("#number");
               number.val(num);
               //实时监听价格输入框和件数的变化，计算金额的总数
              budget.on('input propertychange',function () {
                   if($(this).val()!==''&&number.val()!==''){
                       sum=parseFloat($(this).val()*number.val());
                       var count=$(layero).find("iframe").contents().find(".money").text(sum);
                   }
               })
               number.on('input propertychange',function () {
                   if($(this).val()!==''&&budget.val()!==''){
                       sum=parseFloat($(this).val()*budget.val());
                       var count=$(layero).find("iframe").contents().find(".money").text(sum);
                   }
               })

           }

       })
   })

}