加入购物车列表 HTML + CSS + js

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量1.2k 收藏 15
点赞数 2
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W256999/article/details/131522176
版权

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/购物.js" type="module"></script>
    <link rel="stylesheet" href="./购物.css" />
  </head>
  <body>
    <div class="main">
      <span class="list">购物车列表</span>
    </div>

    <div class="container2">
      <!-- 订单列表 -->
      <div class="cart-panel">
        <div class="hd">
          <ul class="order-title">
            <li class="selecter"></li>
            <li class="product">商品名称</li>
            <li class="market-price">市场价</li>
            <li class="order-price">订购价(8折)</li>
            <li class="num">数量</li>
            <li class="operate">操作</li>
          </ul>
        </div>
        <div class="bd"></div>
      </div>
      <!-- 订单列表 end-->
      <!-- 结算 -->
      <div class="set-bar">
        <div class="set-info">
          <div class="set-stat">
            应付金额:
            <div class="price">
              <span class="price-sign">¥</span>
              <span class="price-num" id="totalMoney"></span>
            </div>
          </div>
        </div>
        <button class="btn btn-primary btn-lg" type="button" id="jiesuan">
          <a onclick="payfun()">去结算</a>
        </button>
        <button class="btn-dele" onclick="chedel()">选中删除</button>
        <button class="btn-dele1">清空购物车</button>
        <input
          type="checkbox"
          class="asd"
          value="全选"
          id="cele"
          onchange="cheupdata()"
        />
      </div>
      <!-- 结算 End -->
    </div>
  </body>
</html>

js

import {
  ranshopliat,
  deleshopliat,
  clearshop,
  selectshop,
  cartNumSub,
  removereq,
  selectAllReg,
  payReg,
} from "./api.js";
let bd = document.querySelector(".bd");
let id = localStorage.getItem("uid");
let isnone;
ran();
function ran() {
  ranshopliat(id).then((r) => {
    console.log(r.data.cart);
    let str = r.data.cart.map((v) => {
      return `
      <ul class="order-list">
      <li class="selecter">
          <i class="icon-select active"></i>
      </li>
      <li class="img-box">
      <input type="checkbox" name="" id="box"  ${
        v.is_select ? "checked" : ""
      } onclick='che(${v.goods_id})'>
          <a href="#" target="_blank">
            <img src="${v.img_small_logo}" />
          </a>
      </li>
      <li class="product">
          <a href="#" target="_blank">
            <span class="product-title" style="line-height: 40px"
              >${v.title}</span
            >
            <span class="feature"></span>
          </a>
      </li>
      <li class="market-price">
          <span class="price-sign">¥</span>
          <span class="price-num">${v.price}</span>
      </li>
      <li class="order-price">
          <span class="price-sign">¥</span>
          <span class="price-num">${v.current_price}</span>
      </li>
      <li class="num">
          <div class="number-box">
              <input type="button" class="sub-number" value="-" onclick="delran(${
                v.goods_id
              },${v.cart_number})"/>
              <input type="text" value="${v.cart_number}" class="txt-num" />
              <input type="button" class="add-number" value="+" onclick="addran(${
                v.goods_id
              },${v.cart_number})"/>
          </div>
      </li>
      <li class="operate">
          <a href="javascript:void(0)" class="delBtn" onclick="btn(${
            v.goods_id
          })">删除</a>
      </li>
  </ul>   
      `;
    });
    bd.innerHTML = str.join("");

    isnone = v.is_select.filter((item) => item.is_select == true);
    document.querySelector("#cele").checked = isnone;
    if (isnone != isnone) {
      document.querySelector("#isAll").checked = "";
    }
  });
}

let uid = localStorage.getItem("uid");
window.btn = function (goodsId) {
  deleshopliat(uid, goodsId).then((r) => {
    console.log(r);
    // location.relode();
    // history.go(0);
    ran();
  });
};

//清空购物车
let clear = document.querySelector(".btn-dele1");
clear.onclick = function () {
  let uid = localStorage.getItem("uid");
  clearshop(uid).then((r) => {
    console.log(r);
    // history.go(0);
    ran();
  });
};

//修改状态
window.che = function (id) {
  // console.log(id)
  let uid = localStorage.getItem("uid");
  selectshop(uid, id).then((r) => {
    console.log(r.data);
  });
};

//减减
window.delran = function (id, number) {
  console.log(number);
  //   let newNum = ++cartNum;
  if (number == 1) {
    let f = confirm("是否要删除");
    if (f) btn(id);
    return;
  }
  let newNum = number - 1;
  console.log(newNum);
  cartNumSub(uid, id, newNum);
  ran();
};
//加加
window.addran = function (id, number) {
  console.log(number);
  let newNum = number + 1;
  console.log(newNum);
  cartNumSub(uid, id, newNum);
  ran();
};

// 选中删除
window.chedel = function () {
  let uid = localStorage.getItem("uid");
  removereq(uid).then((r) => {
    console.log(r.data);
    document.querySelector(".asd").checked = "";
    ran();
  });
};

//全选
// let isnone;
window.cheupdata = function () {
  // console.log(11);
  // ran()
  let uid = localStorage.getItem("uid");
  isnone = !isnone;
  console.log(isnone);
  let type = isnone ? 1 : 0;
  selectAllReg(uid, type).then((r) => {
    console.log(r);
    ran();
  });
};

///结算

window.payfun = function () {
  let uid = localStorage.getItem("uid");
  console.log("结算");
  // location.href = "./结账.html";
  payReg(uid).then((r) => {
    console.log(r.data);
    // location.href = "./结账.html";
    // let a = r.data;
    alert(r.data.message);
  });
};

css

/* 重置基础样式 */
* {
	margin: 0;
	padding: 0;
}

.main {
	width: 100%;
	height: 70px;
	background-color: #ffe2e2;
	text-align: center;
  }
  .list {
	font-size: 30px;
	line-height: 70px;
	font-weight: 500;
	color: #848484;
  }
  #box {
	width: 20px;
	height: 20px;
	/* word-wrap: 200px; vertical-align: auto; */
	margin-right: 50px;
  }
  .asd {
	float: right;
	width: 30px;
	height: 30px;
	margin: 20px;
  }
.container2 a {
	color: #333333;
	text-decoration: none;
}
 
.container2 a:hover {
	color: darksalmon;
}
 
/* 订单列表 */
.container2 {
	width: 990px;
	border-top: 1px solid #E9ECF0;
	margin: 20px auto 120px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.container2 .cart-panel {
	margin-bottom: 20px;
	border: 1px solid #d9d9d9;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .hd {
	height: 46px;
	margin: 0;
	padding: 0 20px;
	list-style: none;
	background-color: #ebebeb;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-title {
	margin: 0;
	padding: 0;
	list-style: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-title:before,
.cart-panel .order-title:after {
	content: " ";
	display: table;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-title li.selecter {
	width: 36px;
	height: 40px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-title li {
	font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
	font-weight: bold;
	display: inline-block;
	float: left;
	padding: 10px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-title li.product {
	width: 432px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

}
 
.cart-panel .order-title li.market-price,
.cart-panel .order-title li.order-price,
.cart-panel .order-title li.num,
.cart-panel .order-title li.operate {
	text-align: center;
	width: 120px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
 
 
 
.cart-panel .bd {

	margin: 0;
	padding: 0 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list:first-child {
	border-top: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list {
	font-size: 12px;
	margin: 0;
	padding: 15px 0;
	list-style: none;
	border-top: 2px dotted #d9d9d9;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list:before,
.cart-panel .order-list:after {
	content: " ";
	display: table;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list:after {
	clear: both;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list .selecter {
	width: 36px;
	height: 88px;
	text-align: left;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li {
	line-height: 40px;
	display: inline-block;
	float: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list .selecter .icon-select {
	width: 20px;
	height: 20px;
	margin-top: 34px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list .icon-select {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url(../img/ico_unchecked.png);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list .icon-select.active {
	background-image: url(../img/ico_checkout.png);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.img-box {
	width: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.img-box img {
	width: 80px;
	height: 88px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.product {
	width: 332px;
	padding: 24px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
    text-overflow: ellipsis;
}
 
.cart-panel .order-list li.product span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.product .feature {
	color: #ff6a00;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.market-price {
	width: 120px;
	padding: 0;
	line-height: 88px;
	text-decoration: line-through;
	color: #999999;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.price-sign {
	font-family: arial;
	margin-right: -4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.price-num {
	font-family: arial, Verdana, Arial;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.order-price {
	width: 118px;
	padding: 0;
	line-height: 88px;
	color: #232628;
	font-weight: normal;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.num {
	width: 122px;
	line-height: 88px;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list:after {
	clear: both;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.cart-panel .order-list li.operate {
	width: 120px;
	font-size: 12px;
	padding: 24px 0 24px 42px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
/* 结算 */
.set-bar {
	margin-bottom: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.set-bar .set-info {
	font-size: 12px;
	line-height: 52px;
	float: left;
	width: 870px;
	height: 52px;
	padding: 0 20px;
	border: 1px solid #d9d9d9;
	border-right: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.set-bar .set-info .set-stat {
	float: right;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.set-bar .set-info .set-stat .price {
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	color: #ff6a00;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
 
.set-bar .btn-lg {
	font-weight: bold;
	float: right;
	width: 120px;
	height: 52px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	color: #ffffff;
	background-color: #ff6a00;
	border-color: #ff6a00;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
 .btn-dele {
	font-weight: bold;
	float: right;
	width: 120px;
	height: 52px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	color: #ffffff;
	background-color: #9ab2f8;
	border-color: #9ab2f8;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 .btn-dele1 {
	font-weight: bold;
	float: right;
	width: 200px;
	height: 52px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	color: #ffffff;
	background-color: #9ab2f8;
	border-color: #9ab2f8;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
 
/* 加减按钮样式 */
.number-box {
	border: #e5e5e5 solid 1px;
	display: inline-block;
	margin-top: 26px;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.number-box input[type='text'] {
	height: 30px;
	border-top: none;
	border-bottom: none;
	border-left: #e5e5e5 solid 1px;
	border-right: #e5e5e5 solid 1px;
	margin: 0;
	text-align: center;
	width: 40px;
	outline: none;
	padding: 0 5px;
	float: left;
	line-height: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.number-box input[type='button'] {
	height: 30px;
	width: 40px;
	float: left;
	border: none;
	outline: none;
	background-color: #f3f3f3;
	line-height: 30px;
	cursor: pointer;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.number-box input[type='button']:hover {
	background-color: #f9f9f9;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
 
.number-box input[type='button']:active {
	background-color: #f6f6f6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#jiesuan>a{
	color: white;
}

效果展示

 

66-41
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
HTML5+CSS3移动商城-购物车
04-29
- **商品添加**：用户可以通过点击商品加入购物车，这需要使用JavaScript处理事件监听和数据更新。 - **商品展示**：使用HTML5的`data-*`属性或JSON-LD来存储商品信息，CSS3则用于美化展示。 - **数量调整**：...
原生html+js+css添加购物车效果
Dreamweaver_Bob的博客
03-06 1529
【代码】原生html+js+css添加购物车效果。
html+css+jquery实现简单的购物车功能
2401_85124858的博客
06-10 114
89398%微软X470键盘150黑色902896%洛克iphone6手机壳60透明67299%蓝牙耳机100蓝色893795%金士顿U盘70红色482100%
HTML+CSS+JS实操京东购物车
qq_45841233的博客
12-03 4323
HTML+CSS+JS实操京东购物车
javascript+css+html购物车案例
qq_36507046的博客
07-15 6429
javascript+css+html购物车案例，javascript代码部分主要实现三部分功能，1、商品数量增加（减少）同时小计增加（减少）2、封装一个用于计算总价和总量的函数3、删除功能
制作京东购物车，包含html+js+css完整代码
m0_74937643的博客
05-18 1332
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
html+css+js实现购物车(鼠标移入显示对话框)
Infatuatedmonkey的博客
04-20 1620
1，主要通过js来改变display来实现 2，效果图 3.html部分 <section id="shopping"> <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div> <div id="cartList"> <h2>最新加入的商品</h2> <
小米商城html+css+js全代码
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
html+css+js添加购物车功能
热门推荐
棠梨染青衣
07-25 3万+
最近想做一个添加商品到购物车的功能，最好添加的时候还能有一点动画，于是就去网上找了一些相关的示例以做参考。 1、点击“加入购物车”按钮商品可以添加到购物车栏。 2、添加过程中有一个飞入的动画。 3、添加完成该按钮就会变成绿色。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;...
Html+jQuery+Css 实现一个简单的购物车
Dragon
11-25 473
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://app...
html+css+简单的js制作的超市页面
09-12
在本项目中，“html+css+简单的js制作的超市页面”是一个典型的Web前端开发实例，主要涉及HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术。这些技术是构建交互式网页的基础，下面将详细介绍...
html+css仿写电商网站商品购买页面
04-28
- 加入购物车按钮：`<button>`元素，可添加事件处理，如`onclick`触发JavaScript函数。 - 商品规格选择：如颜色、尺码，可使用`<select>`和`<option>`组合实现。 4. 响应式布局： - 使用`media queries`：根据...
html+js+css实现一个鲜花商城
07-02
用户需能轻松浏览各类鲜花产品，查看详细信息，加入购物车，并最终完成购买流程。同时，网站需要具备吸引人的视觉设计，确保良好的用户体验。 学习目标 HTML基础：掌握标签的使用，构建页面结构，理解语义化的重要...
html+css+javascript+jquery静态商城模板包括首页登录注册个人中心购物车结算支付页面
04-07
“添加到购物车”按钮，允许用户将商品加入购物车。 可能包含用户评论或评分，提供其他用户的购买建议。 购物车页面 (Cart Page) 展示用户已选商品的列表，包括商品详情、数量和总价。 提供修改商品数量、删除商品的...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1065
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2353
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Html在图片上划一个矩形区域，并且获取区域坐标
zxb11c的博客
07-25 206
【代码】Html在图片上划一个矩形区域，并且获取区域坐标。
购物商城商品详情页面html+css+js
03-02
购物商城商品详情页面的HTML、CSS和JS代码可以根据具体需求和设计风格的不同而有所差异。以下是一个简单的示例，供参考： HTML代码： ```html <!DOCTYPE html> <html> 商品详情 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值