购物车结算

最新推荐文章于 2024-05-15 08:52:02 发布
最新推荐文章于 2024-05-15 08:52:02 发布
阅读量555 收藏 2
点赞数 1
文章标签： js 购物车结算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41649157/article/details/80434094
版权
<!DOCTYPE html>
< html lang = "en" >
  
< head >
  < meta charset = "utf-8" >
  < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
  < title >购物车结算</ title >
  < meta name = "description" content = "" >
  < meta name = "keywords" content = "" >
  < meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  < meta name = "format-detection" content = "telephone=no" />
  < meta name = "renderer" content = "webkit" >
  <!--<![endif]-->
  < meta name = "apple-mobile-web-app-capable" content = "yes" >
  < meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
  < style >
  .shop-total,
  .all-total {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  color: #f00;
  float: left;
  }
  
  .one-shop,
  .all-total,
  .shop-total {
  width: 400px;
  }
  
  p {
  margin: 0;
  }
  
  .goods-check {
  width: 25px;
  height: 25px;
  margin-top: 5px;
  }
  
  .goods-msg,
  p,
  label {
  float: left;
  }
  </ style >
</ head >
  
< body >
  <!-- 一个店铺 -->
  < div class = "one-shop" >
  <!-- 一个商品 -->
  < div class = "one-goods" >
   < div class = "goods-msg" >
   < label for = "" >
    < input type = "checkbox" class = "goods-check GoodsCheck" >
   </ label >
   < button type = "button" class = "minus" >-</ button >
   < input type = "text" class = "am-num-text" value = "1" />
   < button type = "button" class = "plus" >+</ button >
   </ div >
   < p >商品单价：￥< span class = "shop-total-amount GoodsPrice" >20.00</ span ></ p >
  </ div >
  <!-- 一个商品 -->
  < div class = "one-goods" >
   < div class = "goods-msg" >
   < label for = "" >
    < input type = "checkbox" class = "goods-check GoodsCheck" >
   </ label >
   < button type = "button" class = "minus" >-</ button >
   < input type = "text" class = "am-num-text" value = "1" />
   < button type = "button" class = "plus" >+</ button >
   </ div >
   < p >商品单价：￥< span class = "shop-total-amount GoodsPrice" >9.90</ span ></ p >
  </ div >
  <!-- 一个商品 -->
  < div class = "one-goods" >
   < div class = "goods-msg " >
   < label for = "" >
    < input type = "checkbox" class = "goods-check GoodsCheck" >
   </ label >
   < button type = "button" class = "minus" >-</ button >
   < input type = "text" class = "am-num-text" value = "1" />
   < button type = "button" class = "plus" >+</ button >
   </ div >
   < p >商品单价：￥< span class = "shop-total-amount GoodsPrice" >10.00</ span ></ p >
  </ div >
  <!-- 店铺合计 -->
  < div class = "shop-total" >
   < label for = "" >
   < input type = "checkbox" class = "goods-check ShopCheck" >店铺全选 </ label >
   < p >本店合计：￥< span class = "shop-total-amount ShopTotal" >0</ span ></ p >
  </ div >
  </ div >
  <!-- 一个店铺 -->
  < div class = "one-shop" >
  <!-- 一个商品 -->
  < div class = "one-goods" >
   < div class = "goods-msg" >
   < label for = "" >
    < input type = "checkbox" class = "goods-check GoodsCheck" >
   </ label >
   < button type = "button" class = "minus" >-</ button >
   < input type = "text" class = "am-num-text" value = "1" />
   < button type = "button" class = "plus" >+</ button >
   </ div >
   < p >商品单价：￥< span class = "shop-total-amount GoodsPrice" >30.00</ span ></ p >
  </ div >
  <!-- 一个商品 -->
  < div class = "one-goods" >
   < div class = "goods-msg" >
   < label for = "" >
    < input type = "checkbox" class = "goods-check GoodsCheck" >
   </ label >
   < button type = "button" class = "minus" >-</ button >
   < input type = "text" class = "am-num-text" value = "1" />
   < button type = "button" class = "plus" >+</ button >
   </ div >
   < p >商品单价：￥< span class = "shop-total-amount GoodsPrice" >20.00</ span ></ p >
  </ div >
  <!-- 店铺合计 -->
  < div class = "shop-total" >
   < label for = "" >
   < input type = "checkbox" class = "goods-check ShopCheck" >店铺全选 </ label >
   < p >本店合计：￥< span class = "shop-total-amount ShopTotal" >0</ span ></ p >
  </ div >
  </ div >
  <!-- 总计 -->
  < div class = "all-total" >
  < label for = "" >
   < input type = "checkbox" class = "goods-check" id = "AllCheck" >全选 </ label >
  < p >总价合计：￥< span class = "shop-total-amount" id = "AllTotal" >0</ span ></ p >
  </ div >
  < script src = "http://code.jquery.com/jquery-2.2.0.min.js" ></ script >
  < script >
  // 数量减
  $(".minus").click(function() {
  var t = $(this).parent().find('.am-num-text');
  t.val(parseInt(t.val()) - 1);
  if (t.val() <= 1) {
   t.val(1);
  }
  TotalPrice();
  });
  // 数量加
  $(".plus").click(function() {
  var t = $(this).parent().find('.am-num-text');
  t.val(parseInt(t.val()) + 1);
  if (t.val() <= 1) {
   t.val(1);
  }
  TotalPrice();
  });
  // 点击商品按钮
  $(".GoodsCheck").click(function() {
  var goods = $(this).closest(".one-shop").find(".GoodsCheck"); //获取本店铺的所有商品
  var goodsC = $(this).closest(".one-shop").find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品
  var Shops = $(this).closest(".one-shop").find(".ShopCheck"); //获取本店铺的全选按钮
  if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
   Shops.prop('checked', true); //店铺全选按钮被选中
   if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
   $("#AllCheck").prop('checked', true); //全选按钮被选中
   TotalPrice();
   } else {
   $("#AllCheck").prop('checked', false); //else全选按钮不被选中
   TotalPrice();
   }
  } else { //如果选中的商品不等于所有商品
   Shops.prop('checked', false); //店铺全选按钮不被选中
   $("#AllCheck").prop('checked', false); //全选按钮也不被选中
   // 计算
   TotalPrice();
   // 计算
  }
  });
  // 点击店铺按钮
  $(".ShopCheck").change(function() {
  if ($(this).prop("checked") == true) { //如果店铺按钮被选中
   $(this).parents(".one-shop").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中
   if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
   $("#AllCheck").prop('checked', true); //全选按钮被选中
   TotalPrice();
   } else {
   $("#AllCheck").prop('checked', false); //else全选按钮不被选中
   TotalPrice();
   }
  } else { //如果店铺按钮不被选中
   $(this).parents(".one-shop").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选
   $("#AllCheck").prop('checked', false); //全选按钮也不被选中
   TotalPrice();
  }
  });
  // 点击全选按钮
  $("#AllCheck").click(function() {
  if ($(this).prop("checked") == true) { //如果全选按钮被选中
   $(".goods-check").prop('checked', true); //所有按钮都被选中
   TotalPrice();
  } else {
   $(".goods-check").prop('checked', false); //else所有按钮不全选
   TotalPrice();
  }
  $(".ShopCheck").change(); //执行店铺全选的操作
  });
  
  function TotalPrice() {
  var allprice = 0; //总价
  $(".one-shop").each(function() { //循环每个店铺
   var oprice = 0; //店铺总价
   $(this).find(".GoodsCheck").each(function() { //循环店铺里面的商品
   if ($(this).is(":checked")) { //如果该商品被选中
    var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量
    var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价
    var total = price * num; //计算单个商品的总价
    oprice += total; //计算该店铺的总价
   }
   $(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价
   });
   var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价
   allprice += oneprice; //计算所有店铺的总价
  });
  $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
  }
  </ script >
</ body >
  
</ html >
一个渣渣小前端
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
购物车（结算）
m0_60375943的博客
10-09 149
购物车jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> <html> <head> <meta charset="utf-8"> <title>购物车</title> &lt...
Bootstrap淘宝购物车结算代码
06-24
在“Bootstrap淘宝购物车结算代码”这个项目中，我们可以看到如何利用Bootstrap来创建一个功能完备的购物车结算页面，这在电商网站中是非常关键的一个环节。 首先，我们要理解购物车结算页面的基本构成。一个标准的...
2024年安卓最全Android 购物车实现（思路+步骤+源码），2024年最新阿里面试轮次
2401_84556681的博客
05-15 785
单选指的是单个店铺里单个商品选中，该店铺如果所有商品都选中，则店铺自动选中，而直接选中店铺则里面所有商品选中，这是单选也是多选，你选中店铺其实就是多选店铺中的商品。这么解释不知道你好不好理解，下面来说全选，全选就是所有商品或店铺选中，所有商品选中就是所有店铺选中，所有店铺选中就是所有商品选中，两者满足其一都是为全选，而全选也是可以主动和被动，主动就是用户点击这个全选按钮，然后选中所有商品或者店铺，被动就是通过对所有店铺的选中或者所有商品的选中来达成全选。这里面就一个关键点，那就是选中店铺的数量。
购物车结算功能
06-01
购物车结算功能是电商网站或应用中的核心组件之一，它为用户提供了一个方便的途径来集中管理他们的选购商品，计算总价，并进行支付操作。一个优秀的购物车结算插件应该具备良好的用户体验设计，使得用户在结算过程中...
vue实现购物车结算功能
10-15
主要介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
购物商城---购物车，结算
zhou920786312的博客
04-18 1021
1商品详情页面点击购买到购物车页面点击购物，刷新购物车页面 流程图 代码实现 // 购买按钮,通过页面cookie获取数据 @RequestMapping(value = "/shopping/buyCart.shtml") public String buyCart(HttpServletRequest request, ModelMap modelMap, Integer
原生JS实现购物车结算功能代码
11-11
插件描述：一款界面很舒服的，用户体验很高的购购物才结算插件。 参考示例：http://www.jq22.com/jquery-info4625
使用jQuery实现购物车结算功能
10-19
主要为大家详细介绍了使用jQuery实现购物车结算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS购物车结算代码
03-30
JS实现购物车结算功能代码
购物车结算功能代码
11-17
一款界面很舒服的，用户体验很高的购购物才结算插件
jQuery+Bootstrap布局购物车结算页面代码
06-10
这是一款jQuery+Bootstrap布局购物车结算页面代码，支持商品数量加减、全选、自动计算金额等。
EasyUI项目之购物车结算功能
weixin_56069070的博客
10-11 148
前言：继续讲解EasyUi项目《网上书城》之购物车结算功能 码字不易，点个关注 转载请说明！ 开发工具:eclipse，MySQL 目录 一、明确目标： ①名字乱码问题 ②将订单项，订单表加入到数据库 一、明确目标： 1、将上次的购物车显示名字乱码的问题解决 2、将订单项表加入到数据库 3、将订单表加入到数据库 4、改变订单项表中数量时书表中的销量会随之改变 ①名字乱码问题 从上面图片可以看出...
使用jQuery制作一个简易的购物车结算流程
dianjue9761的博客
01-03 504
因为今天下午时候在网上买了东西，在结算界面的时候突发奇想的也想自己动手做一个结算界面，当然了，只是一个最简易的结算界面，有商品数量的加减，有单价和小计，单个多个删除，全选和区县全选等等一些小功能，我在上大学时候用过，相信不少初学者也会用到或者有些迷惑。这是我写的第一篇原创作品，一来当做自己的成长记录以及学习笔记，二来为在这给购物车结算方面的初学者当个参考。本篇侧重对象为初学者，请大牛一笑...
购物车加商品时候结算步骤
weixin_44927868的博客
04-16 2788
function add(obj) { var num = obj.nextElementSibling; //获取数量文本框 var nums = parseInt(num.value); //获取数量转换为int类型 nums++; //点击+之后数量+1 num.value = nums; //把计算后的值写入数量文本框 var jsdj = obj.previ...
购物车单选 计算
liujin1121的博客
11-18 186
商品的适配器 //接口回调 private SetOnclicklinaer lisnaer; public void result(SetOnclicklinaer lisnaer){ this.lisnaer=lisnaer; } //定义接口 public interface SetOnclicklinaer{ void click(); } @Override public void on...
python购物车结算
最新发布
06-17
在Python中实现一个简单的购物车结算功能，通常涉及到以下几个步骤： 1. **创建商品类**：定义一个商品类（例如`Product`），包含属性如名称、价格、数量等。 ```python class Product: def __init__(self, name,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值