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

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 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>
mituan1234567
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 实现购物车的商品总数及价格计算
qq_43769553的博客
09-23 3523
jquery 实现购物车的价格计算和商品件数计算 html代码如下 <ul> <li> <input type="checkbox">商品一 单价 <span>100</span> <button>-</button> <input type="text" value=...
vue简单购物车结算计算总价
努力变好
10-30 6485
1、这个购物车主要用到了computed计算 2、效果图： 删除后： 3、功能说明： 点击“+”，“-”可实现数量的加减，总价格和件数也会随之改变 单击移除按钮，删除这个商品，价格和件数随之更改 4、代码（vue.js目录记得修改） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车结算</title> <script
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 332
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
购物车之总价
m0_60970928的博客
10-26 239
购物车总价
jQuery实现购物车计算价格统计功能
01-08
jQuery实现购物车计算价格统计功能 #功能介绍 进入界面，刷新触发onload方法跳转到JS代码，可以对购物车内商品数量进行增加-减少，商品价格自动统计、当更改商品数量的输入框value值时，整个购物表商品的价格，商品的小计和总计会根据数量发生变化。 话不多说直接上代码 *{margin:0;padding:0;list-style-type:none;} a{color:#666;text-decoration:none;} table{border-collapse:collapse;border-spacing:0;border:0;
android 输入单价与数量，自动计算总价
02-17
android 输入单价与数量，自动计算总价。项目完整，条理清晰。
jQuery实现购物车多物品数量的加减+总价计算
10-25
主要介绍了jQuery实现购物车多物品数量的加减+总价计算,需要的朋友可以参考下
jQuery实现的购物车物品数量加减功能代码
10-21
主要介绍了jQuery实现的购物车物品数量加减功能,涉及jQuery针对鼠标事件的响应及页面元素动态操作相关技巧,需要的朋友可以参考下
jQuery商品数量加减并计算总价代码
06-10
本文将详细介绍如何使用jQuery实现商品数量加减并计算总价的代码。 首先，我们需要一个HTML结构来展示商品信息和数量控制按钮。在`index.html`文件中，这可能包括以下元素： ```html 商品名称 ...
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
07-15
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
jQuery实现购物车表单自动结算效果实例
12-08
本文实例讲述了jQuery实现购物车表单自动结算效果。分享给大家供大家参考。具体如下： 这里jQuery实现购物车表单自动结算，只要用户把所购商品的数量输入进去，就可以适时计算出商品总额，金额+运费，类似淘宝的购物车结算功能，计算过程是适时的，用jquery实现了Ajax不刷新网页就计算的功能，做购物类网站的或许可以用上这个例子。 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
jquery 动态计算价格
lengxin337的专栏
11-29 2620
{$vo.goods_price} function countTotal() { var numObj = $('.input-num');      var priceObj = $('.input-price');      var order_money = 0;      var order_num   = 0;      $.each(numObj,
asp.net之购物车
~~
11-10 4047
buy1.aspx &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;asp:CheckBox ID="C1" runat="server" Text="猪肉" /&gt; &lt;br /&gt; &lt;asp:CheckBox ID=&qu
js购物车选中商品实现计算商品总价格
Return_KB的博客
01-09 1万+
为了在激烈的互联网竞争中获得一席之地，都努力使自己的网站更为人性化。比如在购物网站一般都有这样的功能，那就是在结算商品的时候，网站可以自动计算要购买商品所需要花费的金钱数量。 代码实例如下: 010203040506070809101112131415161718192021222324252627282930313233343536373839html>head>meta charset
jQuery实现购物车商品数量及总价的计算
luoyu6的博客
10-28 1万+
  记录一下项目中遇到的计算购物车商品数量和总价的jQuery代码，重点在于选择器以及.text()命令的使用。 先上效果图，点击加减，商品数量以及总价会发生相应变化。 html代码：   &lt;div class="addGoods"&gt; &lt;div class="goods_list"&gt; &lt;ul&gt; ...
asp.net购物车，订单以及模拟支付宝支付（一）---购物车表及添加购物车流程
weixin_30733003的博客
07-07 594
在开发一个Web程序的时候用到了网购这个功能，上来分享并记录一下，以便以后忘记了可以自己看看（电脑东西太多，笔记都不知道放哪里去了啊啊啊啊啊！！！） 没有什么高并发量，什么什么技术理论，只是一个最最基本的网购功能 首先，我们需要一张购物车表，这里我使用的是mssql2005，表结构如下： Id，不用说，标识字段，自动增长（你tm不是说了吗。。。） userId，购买...
html+js实现的简单计算器(加减乘除)
热门推荐
静湖微风
04-13 6万+
function setOp(op, opTips) { var tb=document.getElementById("tb_calc"); tb.style.display = "none"; document.getElementById("x").value = ""; do
自定义控件之购物车数量加减
万物weiyi
07-20 1860
添加购物车实现数量的加减 先看一下效果图 首先我们实现自定义控件代码如下：import android.content.Context; import android.graphics.drawable.Drawable; import android.text.TextUtils; import android.util.AttributeSet; import android.view.Mo
JQuery实现Ajax 根据商品名称自动显示价格
dibengpo4955的博客
05-19 240
数据库字段：Id（主键，自增）,Name(商品名称)，Price（商品单价）添加数据集DataSetProducts ，添加方法：GetDataByName() ----->对应SQL：SELECTid,name,priceFROMdbo.T_Productwherename=@name新建一般处理程序：GetPrice.ashx代码：usingSystem...
jquery实现购物车
11-07
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、付费专栏及课程。

余额充值