广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用jQuery实现购物车结算功能
  • 200

0
分享到

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

2024-04-02 19:04:59 200人浏览 薄情痞子
摘要

这篇文章主要介绍如何使用Jquery实现购物车结算功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下<!DOCTYPE html> <html

这篇文章主要介绍如何使用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();
  });

  
  $(".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)); 
  $("#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实现购物车结算功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用jQuery实现购物车结算功能

本文链接: https://www.lsjlt.com/news/67634.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用jQuery实现购物车结算功能
    这篇文章主要介绍如何使用jQuery实现购物车结算功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下<!DOCTYPE html> <html...
    99+
    2022-10-19
  • jquery实现购物车功能
    本文实例为大家分享了jquery实现购物车功能的具体代码，供大家参考，具体内容如下 html ​<!DOCTYPE html> <html> ...
    99+
    2022-11-12
  • Vue模拟实现购物车结算功能
    本文实例为大家分享了Vue实现购物车结算功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <...
    99+
    2022-11-12
  • vue简单实现购物车结算功能
    本文实例为大家分享了vue简单实现购物车结算的具体代码，供大家参考，具体内容如下 样式没有写 <template>  <div class="about cont...
    99+
    2022-11-13
  • jquery怎么实现购物车功能
    本篇内容主要讲解“jquery怎么实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery怎么实现购物车功能”吧!html<!DOCTYPE html>&l...
    99+
    2023-06-20
  • jQuery实现全部购物车功能实例
    目录一、全选二、增减商品数量三、修改商品小计四、计算总计和总和五、删除商品 六、选中商品添加背景七、html 全部核心代码今天是一些购物车的基本功能实现，全选、增减商品数量、修改商品...
    99+
    2022-11-12
  • JavaScript如何实现购物车结算
    这篇文章主要介绍JavaScript如何实现购物车结算，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ JavaScript实现购物车结算的方法：1、在页面...
    99+
    2022-10-19
  • jquery购物车实时结算特效实现思路
    复制代码 代码如下: $(function(){ $(".child_tab tr:last-child").find("td").css({borderBottom:'none'}...
    99+
    2022-11-15
    购物车 实时结算
  • 如何用php实现购物车功能
    本篇内容主要讲解“如何用php实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用php实现购物车功能”吧!一、购物车功能的基本实现原理购物车是一个存储商品信息的容器，用户通过往购...
    99+
    2023-07-05
  • 如何实现IONIC购物车功能
    这篇文章主要为大家展示了“如何实现IONIC购物车功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现IONIC购物车功能”这篇文章吧。具体内容如下HTM...
    99+
    2022-10-19
  • vue如何实现购物车功能
    本篇内容主要讲解“vue如何实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现购物车功能”吧!如图，需要有加入购物车的标识思路如下：点击购物车按钮时将商品的id,titl...
    99+
    2023-06-30
  • Vue实现购物车计算总价功能
    用Vue实现一个购物车计算总价的功能，供大家参考，具体内容如下 代码 html <div id="app">         <div class="panel ...
    99+
    2022-11-13
  • jQuery如何模拟淘宝购物车功能
    这篇文章主要介绍jQuery如何模拟淘宝购物车功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先我们要实现的内容的需求有如下几点：1.在购物车页面中，当选中“全选”复选框时，所有...
    99+
    2022-10-19
  • jQuery怎么模拟实现淘宝购物车功能
    这篇文章主要讲解了“jQuery怎么模拟实现淘宝购物车功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery怎么模拟实现淘宝购物车功能”吧！首先我们要实现的内容的需求有如下几点：1....
    99+
    2023-06-04
  • vue如果实现购物车功能
    本文小编为大家详细介绍“vue如果实现购物车功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue如果实现购物车功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 原理分析...
    99+
    2022-10-19
  • 如何使用session实现简易购物车功能
    这篇文章主要介绍“如何使用session实现简易购物车功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用session实现简易购物车功能”文章能帮助大家解决问题。整体思路：先写一个JSP用于...
    99+
    2023-06-29
  • 使用session实现简易购物车功能
    本文实例为大家分享了用session实现简易购物车功能的具体代码，供大家参考，具体内容如下 整体思路：先写一个JSP用于实现商品图片的读取（再次之前要写好连接数据库），当点加入购物车...
    99+
    2022-11-13
  • angular和BootStrap3如何实现购物车功能
    这篇文章将为大家详细讲解有关angular和BootStrap3如何实现购物车功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、页面搭建1、html结构采用BootS...
    99+
    2022-10-19
  • 怎么用php实现购物车功能
    要使用PHP实现购物车功能，可以按照以下步骤进行：1. 创建一个数据库表来存储购物车信息。例如，可以创建一个名为"cart"的表，包...
    99+
    2023-08-24
    PHP
  • Vue怎么实现购物车计算总价功能
    本文小编为大家详细介绍“Vue怎么实现购物车计算总价功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue怎么实现购物车计算总价功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。效果：代码html<di...
    99+
    2023-06-30
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作