jQuery实现购物车物品数量的加减并自动计算价格

http://www.csrcode.cn/article-3478-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现购物车物品数量的加减并自动计算价格丨芯晴网页特效丨CsrCode.Cn</title>
    <script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>
    <script>
    $(function(){
    var t = $("#text_box");
    $("#add").click(function(){
    t.val(parseInt(t.val())+1)
    setTotal();
    })
    $("#min").click(function(){
    t.val(parseInt(t.val())-1)
    setTotal();
    })
    function setTotal(){
    $("#total").html((parseInt(t.val())*3.95).toFixed(2));
    }
    setTotal();
    })
    </script>
    </head>
    <body>
    <p>单价:3.95</p>
    <input id="min" name="" type="button" value="-" />
    <input id="text_box" name="" type="text" value="4" />
    <input id="add" name="" type="button" value="+" />
    <p>总价:<label id="total"></label></p>
    </body>
    </html>
    <br>第一次运行本代码,请刷新一下本页面先~~<br>所需js文件:<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现购物车是一种常见的网页开发技术,它可以通过JavaScript和jQuery库来实现购物车的添加、删除、修改、计算总价等功能。一般来说,购物车实现需要以下几个步骤: 1. 给商品添加“加入购物车”按钮,点击按钮时将商品信息添加到购物车中。 2. 在页面上显示购物车的内容,包括商品名称、数量、单价、小计等信息。 3. 实现购物车中商品数量、金额随数量、选中改变而改变的功能。 4. 实现加减操作同时改变小计的功能。 下面是一个简单的jQuery购物车实现的示例代码: ``` // 添加商品到购物车 $('.add-to-cart').click(function() { var item = $(this).closest('.item'); var name = item.find('.name').text(); var price = parseFloat(item.find('.price').text()); var quantity = parseInt(item.find('.quantity').val()); var subtotal = price * quantity; var cartItem = $('<div class="cart-item"></div>'); cartItem.append('<div class="name">' + name + '</div>'); cartItem.append('<div class="price">' + price.toFixed(2) + '</div>'); cartItem.append('<div class="quantity">' + quantity + '</div>'); cartItem.append('<div class="subtotal">' + subtotal.toFixed(2) + '</div>'); $('.cart-items').append(cartItem); }); // 计算购物车总价 function calculateTotal() { var total = 0; $('.cart-item').each(function() { var subtotal = parseFloat($(this).find('.subtotal').text()); total += subtotal; }); $('.total').text(total.toFixed(2)); } // 商品数量、金额随数量、选中改变而改变 $('.quantity').change(function() { var quantity = parseInt($(this).val()); var price = parseFloat($(this).closest('.cart-item').find('.price').text()); var subtotal = price * quantity; $(this).closest('.cart-item').find('.subtotal').text(subtotal.toFixed(2)); calculateTotal(); }); $('.checkbox').change(function() { calculateTotal(); }); // 加减操作同时改变小计 $('.increment').click(function() { var quantity = parseInt($(this).siblings('.quantity').val()); $(this).siblings('.quantity').val(quantity + 1).change(); }); $('.decrement').click(function() { var quantity = parseInt($(this).siblings('.quantity').val()); if (quantity > 1) { $(this).siblings('.quantity').val(quantity - 1).change(); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值