首页
所有分类
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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
深入分析jQuery.one() 函数
Jun 03 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
分区(2) 驱动模型(1) 静态压缩(1) 接口(1) 乱码(3) 信息校验(1) 抽象类(1) 自动播放(1) 正则表达式(3) 路由(1)
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
linux iconv方法的使用
2011/10/01 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
js data日期初始化的5种方法
2013/12/29 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python中xrange和range的区别
2014/05/13 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Django如何实现防止XSS攻击
2020/10/13 Python
Python ellipsis 的用法详解
2020/11/20 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
迪卡侬荷兰官网：Decathlon荷兰
2017/10/29 全球购物
陈安之励志演讲稿
2014/08/21 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python