简单的购物车功能

最新推荐文章于 2021-09-08 10:11:08 发布
最新推荐文章于 2021-09-08 10:11:08 发布
阅读量151 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44437258/article/details/106859216
版权

效果图如下
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 600px;
				height: 300px;
				margin: 0 auto;
				text-align:center;
				border-collapse: collapse;
			}
			th{
				background: pink;
				height: 50px;
			}
			tr{
				height: 50px;
			}
        </style>
	</head>
	<body>
		<table border="1px" id="table1">
			<tbody id="tbody">
				
			
			<tr>
				<th>商品名称</th>
				<th>数量</th>
				<th>单价</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td class="goods-name">红烧排骨</td>
				<td>
					<button class="btn1">-</button>
					<span class="goods-num">0</span>
					<button class="btn1">+</button>
				</td>
				<td>
					单价:<span class="goods-price">50</span>
				</td>
				<td>
					小计:<span class="goods-single-price">0</span>
				</td>
				<td>
					操作:<input type="button" value="删除"/>
				</td>
			</tr>
			<tr>
				<td class="goods-name">油焖大虾</td>
				<td>
					<button class="btn1">-</button>
					<span class="goods-num">0</span>
					<button class="btn1">+</button>
				</td>
				<td>
					单价:<span class="goods-price">100</span>
				</td>
				<td>
					小计:<span class="goods-single-price">0</span>
				</td>
				<td>
					操作:<input type="button" value="删除"/>
				</td>
			</tr>
			<tr id="list">
				<td colspan="5">
					一共<span id="goods-total-num">0</span>件商品,共计花费<span id = "goods-total-price">0</span>元。
				</td>
			</tr>
			</tbody>
		</table>
		
		<table border="1px" id="table2">
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>老婆饼</td>
				<td>
					单价:<span class="goods-price">50</span>
				</td>
				<td>
					操作:<button onclick="AddGoods(0)" class="Add">添加</button>
				</td>
			</tr>
			<tr>
				<td>酸菜鱼</td>
				
				<td>
					单价:<span class="goods-price">100</span>
				</td>
				
				<td>
					操作:<button onclick="AddGoods(1)" class="Add">添加</button>
				</td>
			</tr>
			<tr>
				<td>理想大虾</td>	
				<td>
					单价:<span class="goods-price">100</span>
				</td>
				<td>
					操作:<button onclick="AddGoods(2)" class="Add">添加</button>
				</td>
			</tr>
			
		</table>
	</body>
</html>
<script>
	//购物车里有多少商品
//合计所有商品花了多少钱

class Cart{
	
	getGoodsNumAndUpdate(){
		let oGoodsNum=document.getElementsByClassName("goods-num");
		let totalNum=0;
		for(let i=0;i<oGoodsNum.length;i++){
			totalNum += Number(oGoodsNum[i].innerHTML);
		}
		let oGoodsTotalNum=document.getElementById("goods-total-num");
		oGoodsTotalNum.innerHTML=totalNum;
	}
	
	//总共的价格
	getGoodsPriceAndUpdate(){
		let oGoodsPrice =document.getElementsByClassName("goods-single-price");
		let goodsSinglePrice=0;
		for(let i=0;i<oGoodsPrice.length;i++){
			goodsSinglePrice += Number(oGoodsPrice[i].innerHTML);
		}
		let oGoodsTotalPrice =document.getElementById("goods-total-price");
		oGoodsTotalPrice.innerHTML=goodsSinglePrice;
	}
	//计算小计
	getGoodsSinglePrice(num,print){
		return num*print;
	}
	
	//增加货物
	goodsAdd(btn){
		//找到btn的数量
		let oGoodsNum =btn.previousElementSibling;
		oGoodsNum.innerHTML=Number(oGoodsNum.innerHTML)+1;
		//找单价的元素
		let oGoodsPrice=btn.parentNode.nextElementSibling.firstElementChild;
		//找小计的元素
		let oGoodsSinglPrice=btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
		//给小计赋值
		oGoodsSinglPrice.innerHTML=this.getGoodsSinglePrice(oGoodsNum.innerHTML,oGoodsPrice.innerHTML);
		
		this.getGoodsNumAndUpdate();
		this.getGoodsPriceAndUpdate();
	}
	
	//减少货物
	goodsMin(btn){
		//找到btn的数量
		let oGoodsNum=btn.nextElementSibling;
		if(oGoodsNum.innerText>0){
			oGoodsNum.innerHTML=Number(oGoodsNum.innerHTML)-1;
			//找单价的元素
			let oGoodsPrice=btn.parentNode.nextElementSibling.firstElementChild;
			//找小计的元素
			let oGoodsSinglPrice=btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
			//给小计赋值
			oGoodsSinglPrice.innerHTML=this.getGoodsSinglePrice(oGoodsNum.innerHTML,oGoodsPrice.innerHTML);
			
			this.getGoodsNumAndUpdate();
			this.getGoodsPriceAndUpdate();
		}
	}
	
	//删除行
	delGoods(btn){
		let oTr=btn.parentNode.parentNode;
		oTr.remove();
		
		this.getGoodsNumAndUpdate();
		this.getGoodsPriceAndUpdate();
	}
	

	//判断按下的是哪个按钮
	eventBind(){
		let oBtn=document.getElementsByClassName("btn1");
		console.log(oBtn);
		let that=this;
		for(let i=0;i<oBtn.length;i++){
			if(i%2==0){
				oBtn[i].onclick=function(){

					that.goodsMin(this);
				}
			}else{
				oBtn[i].onclick=function(){
					console.log("++");
					that.goodsAdd(this);
				}
			}
		}
		let oDelBtn=document.getElementsByTagName("input");
		for(let i=0;i<oDelBtn.length;i++){
			oDelBtn[i].onclick=function(){
				that.delGoods(this);
			}
		}
		
	}
	}
//添加行
 function AddGoods(num){
		var olist = document.getElementById("list");
		var oTbody=document.getElementById("tbody");
		var oAdd=document.getElementsByClassName("Add");
		//获取商品列表里的商品名
		let goodname=oAdd[num].parentNode.parentNode.firstElementChild.innerHTML;
		//这里获取价格错了，没有获取子元素
		let goodprice=oAdd[num].parentNode.previousElementSibling.children[0].innerHTML;
		//获取购物车里的商品名称
		let oldgoodname=document.getElementsByClassName("goods-name")
		let flag = true;
		for(var i=0;i<oldgoodname.length;i++){//遍历
			
			if(oldgoodname[i].innerHTML==goodname){ //如果购物车已经存在要添加的商品名
				
				c.goodsAdd(oldgoodname[i].nextElementSibling.lastElementChild);//调用增加货物
				flag =false;
				break;
			}
			
		}
		if(flag){ //如果不存在增加字符串
			let str=`<td class="goods-name">${goodname}</td>
				<td>
					<button class="btn1">-</button>
					<span class="goods-num">0</span>
					<button class="btn1">+</button>
				</td>
				<td>
					单价:<span class="goods-price">${goodprice}</span>
				</td>
				<td>
					小计:<span class="goods-single-price">0</span>
				</td>
				<td>
					操作:<input type="button" value="删除"/>
				</td>`
				let oTr=document.createElement("tr"); //定义一个行标签
				oTr.innerHTML=str;
				oTbody.insertBefore(oTr,olist);   //在olist前面加一行
				c.goodsAdd(oldgoodname[i].nextElementSibling.lastElementChild);//调用增加行数
				c.eventBind();//判断按钮
		}
		flag=true;
		
	}
let c=new Cart();
c.eventBind();


</script>
小手冰凉007
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP+Servlet实现简易购物车功能
11-14
通过JSP加Servlet技术实现简易的购物车功能，适合初学JSP的程序猿参考该代码理解JSP与客户端页面相结合的强大功能
简单版购物车功能实现
qq_39900860的博客
10-25 618
主布局 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:l
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3887
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
简单的购物车功能连接数据库
qq_44242030的博客
04-29 2282
实现数量增减到数据库，购物车价格高低排序 <template> <div class="about container"> <button class="btn btn-default"> <router-link to="/customers">返回主页</router-link> </button...
简易的购物车功能实现 --- 19/03/20
HimeYui的博客
03-20 525
本次使用的JS包为JQuery2.0版本 简单的实现界面： 以下为实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...
Android实现简单购物车功能
01-06
本文实例为大家分享了Android实现购物车功能的具体代码，供大家参考，具体内容如下 MainActivity布局： <?xml version=1.0 encoding=utf-8?> android:layout_width=match_parent android:layout_height=...
Python Django实现简单购物车功能
06-26
Python Django实现简单购物车功能
JavaScript编写一个简易购物车功能
12-28
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。  1、用html实现内容；  2、用css修饰外观；  3、用js(jq)设计动效。 第一步：...
实现简单购物车功能
weixin_33738982的博客
11-13 289
#!/usr/bin/python #-*-coding:utf-8-*- aalist=['Mac','Coffee','Book','Bus'] price=['10000','50','500','2000'] shop_list=[]#购物车列表 gongzi=int(raw_input('请输入你的工资：')) importsys ifgon...
Android实现商城购物车功能
龙旋的博客
04-22 8491
最近公司项目做商城模块，需要实现购物车功能，主要实现了单选、全选，金额合计，商品删除，商品数量加减等功能，先看看效果图： 一、实现步骤： 0、添加依赖库 1.购物车主界面布局文件(activity_main.xml) 2.购物车实现逻辑主界面(MainActivity.class) 3.使用ExpandableListView,继承BaseExpandableListAdapter 4.购物车数...
Session简单实现购物车功能
Widsom的博客
03-01 1万+
Session简单实现购物车功能这个小程序主要就3个页面，一个商品列表页面(HomeServlet)，一个是提示加入购物车页面(AddCartTipServlet)，一个是显示购物车清单页面(ShowCartServlet)。HomeServlet页面：@WebServlet({ "/HomeServlet", "/home" }) public class HomeServlet extends
使用excel进行数据挖掘（8）---- 购物篮分析
张某人ER的技术博客 ==学习&&分享==
08-16 1万+
使用excel进行数据挖掘演示购物篮分析。
js实现简单的购物车功能
七月的你的博客
09-03 1330
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
带你快速实现购物车功能
qq_40665861的博客
04-06 2734
一、熟悉购物车 所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。 UI图 二、具体购物车功能 在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还...
简易购物车模板及功能分析
doudou_nc的博客
09-02 738
购物车功能分析 简易购物车模板： https://pan.baidu.com/s/16LsdpXSOHZxek50tbCeAcQ 大致功能如下： 0. mock.js 全选框 商品的数量增减，数量为1 减失效 商品删除 单个商品总价计算 所有商品总价计算 。。。。。。。。 mock.js 1.我打开mock.js之后发现他八千多行…然后我尝试着注释掉它看看有什么变化没… …然后我去搜了搜 ...
Vue之简单购物车功能
a271720559的博客
08-06 2万+
                                          Vue之购物车功能 今天来看看vue怎么实现简单的购物车功能。 效果图：  我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。 我们来看看简单的购物车功能怎么实现： 1.先完成数据绑定 代码： html： &lt;tr v-for=...
Android之购物车及其他功能的角标实现
热门推荐
叶已初秋的博客
01-14 2万+
Android之购物车及其他功能的角标实现
简易购物车项目
啦啦啦的博客
01-30 2834
本人的GitHub：戳我一下（该项目可以直接从GitHub clone下来使用） 简易购物车系统 项目简介： 做一个简易的购物车系统，来巩固一下最近学习的servlet 和 jsp的知识。 功能介绍： 用户登录后可以在购物大厅购物。 购物大厅中的商品以分页的形式展示出来。 用户可以将想要购买的商品加入购物车，并可以在购物车里修改，删除商品。 用户在决定购买的物品后可以提交订单。
Android Studio 实现简单购物车功能
最新发布
06-01
要实现简单的购物车功能，你需要完成以下几个步骤： 1. 创建一个购物车界面，用于展示用户已选的商品和总价。 2. 创建一个商品列表界面，用于展示所有商品的信息和价格。 3. 在商品列表中添加“加入购物车”按钮，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值