简单的js购物车结算

最新推荐文章于 2022-10-19 22:56:10 发布

weixin_30793643

最新推荐文章于 2022-10-19 22:56:10 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

文章标签：数据库

原文链接：http://www.cnblogs.com/liu-heng/p/7481598.html

本文介绍了一个简单的购物车实现方案，通过HTML、CSS和JavaScript完成商品价格的动态计算及更新。支持商品数量增减操作，并实时更新总价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>购物车</title><br>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="CalcEval.js"></script>
    
      <style type="text/css">
    .span_case{
        display:inline-block;
        width:100px;
    }

    .item_goods{
        display:inline-block;
        width:100px;
    }

    .item_price{
        display:inline-block;
        width:100px;
    }

    .item_num{
        color:green;    
    }

    .item_total{
        display:inline-block;
        width:100px;
    }

    .item_all{
        color:red;
    }
    .total{text-align:right;width:345px;}
  </style>
  
 
  </head>
  <body>
      <div>
        <span class="span_case">商品名称</span>
        <span class="span_case">商品单价</span>
        <span class="span_case">商品数量</span>
        <span class="span_case">总价</span>
    </div>

    <div class="item">
        <span class="item_goods">iphone 6s</span>
        <span class="item_price">1.10</span>
        <span class="span_case">
            <input type="button" value="-">
            <span class="item_num">5</span>
            <input type="button" value="+">
        </span>
        <span class="item_total">5.00</span>
        
        <span class="delobj">删除</span>
    </div>

    <div class="item">
        <span class="item_goods">iphone 7</span>
        <span class="item_price">2.03</span>
        <span class="span_case">
            <input type="button" value="-">
            <span class="item_num">2</span>
            <input type="button" value="+">
        </span>
        <span class="item_total">4.00</span>
        <span class="delobj">删除</span>
    </div>

    <div class="item">
        <span class="item_goods">iphone 8</span>
        <span class="item_price">3.00</span>
        <span class="span_case">
            <input type="button" value="-">
            <span class="item_num">2</span>
            <input type="button" value="+">
        </span>
        <span class="item_total">6.00</span>
        <span class="delobj">删除</span>
    </div>

    <div class="item">
        <span class="item_goods">iphone 9</span>
        <span class="item_price">1.00</span>
        <span class="span_case">
            <input type="button" value="-">
            <span class="item_num">2</span>
            <input type="button" value="+">
        </span>
        <span class="item_total">2.00</span>
        <span class="delobj">删除</span>
    </div>

    <div class="total">合计金额：<span class="item_all">17.00</span></div>
    <script>
        $(function(){
//加
            $("[value='+']").click(function(){
                var z = $(this).prev("span").html();
                z = parseInt(z)+1;
                $(this).prev("span").html(z);
                dgzj(this);    
                jszj();
            });    
//减
            $("[value='-']").click(function(){
                var z = $(this).next("span").html();
                z = parseInt(z)-1<0?0:parseInt(z)-1;
                $(this).next("span").html(z);
                dgzj(this);
                jszj();    
            });
            //删除(清空)
            $(".delobj").click(function(){
                //$(this).parent().remove();
                var z = $(this).prev("span").html();
                z=0;
                $(this).prev("span").prev("span").children("span").html(z);
                $(this).prev("span").html(z);
                jszj();
            });
        })
        var ce = new CalcEval();//实例化计算的类
        function dgzj(e){//单个商品的价格
            var sl = $(e).parent().children("span").html();
            var dj = $(e).parent().prev("span").html();    
            var zj = $(e).parent().next("span");
            jg = ce.eval(parseInt(sl)+"*"+parseFloat(dj));
            zj.html(jg);
        }
        function jszj(){//全部商品的价格
            var num=0;
            $(".item_total").each(function() {
                num = ce.eval(num+"+"+parseFloat($(this).html()));
            });
            $(".item_all").html(num);
        }
    </script>
  </body>

</html>