首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

使用jQuery实现购物车结算功能

Posted in jQuery onAugust 15, 2017

本文实例为大家分享了jQuery实现购物车结算功能展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
    /*删除*/
      $(function(){
  $(".blue").bind("click",function(){
    $(this).parent().parent().remove();
    totalPrice();
  });

  /*当鼠标离开文本框时，获取当前值，调用totalPrice()函数进行结算*/
  $(".shopping_product_list_5 input").bind("blur",function(){
    var t = $(this).val();
    totalPrice(); 
  });
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;

  $("#myTableProduct tr").each(function(){  /*循环购物车列表的每一行*/
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());  /*获取文本框中数量值*/
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text()); /* 获取商品价格*/
    var total = price * num;
    allPrice += total; /*计算所有商品的总价格*/

    /*获取节省的金额*/
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;

    /*获取积分*/
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2)); /*填写计算结果，其中利用toFixed()函数保留两位小数*/
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
});
 function totalPrice(){
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
  $("#myTableProduct tr").each(function(){
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text());
    var total = price * num;
    allPrice += total;

    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;

    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2));
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
 }
    </script>
  </head>
  <body>
    <div class="shopping_list_top">您已选购以下商品</div>
  <div class="shopping_list_border">
    <table width="100%" border="1px solid #ccc" >
      <tr class="shopping_list_title" >
        <td class="shopping_list_title_1">商品名</td>
        <td class="shopping_list_title_2">单品积分</td>
        <td class="shopping_list_title_3">市场价</td>
        <td class="shopping_list_title_4">当当价</td>
        <td class="shopping_list_title_5">数量</td>
        <td class="shopping_list_title_6">删除</td>
      </tr>
    </table>
    <table width="100%" border="1px solid #ccc" id="myTableProduct">

      <tr class="shopping_product_list" id="shoppingProduct_01">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
        <td class="shopping_product_list_2"><label>189</label></td>
        <td class="shopping_product_list_3">￥<label>32.00</label></td>
        <td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
        <td class="shopping_product_list_5"><input type="text" value="1"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
      <tr class="shopping_product_list" id="shoppingProduct_02">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
        <td class="shopping_product_list_2"><label>173</label></td>
        <td class="shopping_product_list_3">￥<label>28.00</label></td>
        <td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
        <td class="shopping_product_list_5"><input type="text" value="1"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
      <tr class="shopping_product_list" id="shoppingProduct_03">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
        <td class="shopping_product_list_2"><label>154</label></td>
        <td class="shopping_product_list_3">￥<label>24.80</label></td>
        <td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
        <td class="shopping_product_list_5"><input type="text" value="2"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
      <tr class="shopping_product_list" id="shoppingProduct_04">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
        <td class="shopping_product_list_2"><label>358</label></td>
        <td class="shopping_product_list_3">￥<label>458.00</label></td>
        <td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
        <td class="shopping_product_list_5"><input type="text" value="1"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
      <tr class="shopping_product_list" id="shoppingProduct_05">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
        <td class="shopping_product_list_2"><label>712</label></td>
        <td class="shopping_product_list_3">￥<label>95.00</label></td>
        <td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
        <td class="shopping_product_list_5"><input type="text" value="1"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
      <tr class="shopping_product_list" id="shoppingProduct_06">
        <td class="shopping_product_list_1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
        <td class="shopping_product_list_2"><label>10</label></td>
        <td class="shopping_product_list_3">￥<label>198.00</label></td>
        <td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
        <td class="shopping_product_list_5"><input type="text" value="1"/></td>
        <td class="shopping_product_list_6"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">删除</a></td>
      </tr>
    </table>
    <div class="shopping_list_end">
      <div><a id="removeAllProduct" href="javascript:void(0);" rel="external nofollow" >清空购物车</a></div>
      <ul>
        <li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"/></li>
        <li class="shopping_list_end_2">￥<label id="product_total"></label></li>
        <li class="shopping_list_end_3">商品金额总计：</li>
        <li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow" id="product_save"></label><br/>
          可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label>
        </li>
      </ul>
    </div>
  </div>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

使用jQuery实现购物车结算功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jquery获取链接地址和跳转详解（推荐）
Aug 15 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
Android面试题(6) Oracle面试题(81) 软件测试工程师面试题(53) 软件工程师面试题(40) C#面试题(90) DB面试题(126) .NET面试题(131) C++面试题(199) LINUX面试题(83) 网络工程师面试题(96)
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
2019/05/13 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
vue实现登录拦截
2020/06/29 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
JS实现多功能计算器
2020/10/28 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
详解python中@的用法
2019/03/27 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python字典一键多值实例代码分享
2019/06/14 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
购买限量版收藏品、珠宝和礼品：Bradford Exchange
2016/09/23 全球购物
MAC彩妆英国官网：M·A·C UK
2018/05/30 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
腾讯公司的一个sql题
2013/01/22 面试题
生产部经理岗位职责
2013/12/16 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
工作作风建设心得体会
2014/10/22 职场文书
教务处干事工作总结
2015/08/14 职场文书
编写python程序的90条建议
2021/04/14 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Python必备技巧之函数的使用详解
2022/04/04 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android