Html+jQuery+Css 实现一个简单的购物车

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量470 收藏 8
点赞数 1
分类专栏： HTML 文章标签： jquery html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62199749/article/details/121540080
版权 

<!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://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<table class="table">
			<tr>
				<th>选择</th>
				<th>商品名称</th>
				<th>商品单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="all"></td>
				<td>电脑</td>
				<td>8599</td>
				<td>
					<button type="button" class="btn btn-primary jian">-</button>
					<span>1</span>
					<button type="button" class="btn btn-primary jia">+</button>
				</td>
				<td class="xiao">8599</td>
				<td><button type="button" class="btn btn-danger del">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="all"></td>
				<td>手机</td>
				<td>5499</td>
				<td>
					<button type="button" class="btn btn-primary jian">-</button>
					<span>1</span>
					<button type="button" class="btn btn-primary jia">+</button>
				</td>
				<td class="xiao">5499</td>
				<td><button type="button" class="btn btn-danger del">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="all"></td>
				<td>平板</td>
				<td>7599</td>
				<td>
					<button type="button" class="btn btn-primary jian">-</button>
					<span>1</span>
					<button type="button" class="btn btn-primary jia">+</button>
				</td>
				<td class="xiao">7599</td>
				<td><button type="button" class="btn btn-danger del">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="all"></td>
				<td>键盘</td>
				<td>1299</td>
				<td>
					<button type="button" class="btn btn-primary jian">-</button>
					<span>1</span>
					<button type="button" class="btn btn-primary jia">+</button>
				</td>
				<td class="xiao">1299</td>
				<td><button type="button" class="btn btn-danger del">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="all"></td>
				<td>鼠标</td>
				<td>1099</td>
				<td>
					<button type="button" class="btn btn-primary jian">-</button>
					<span>1</span>
					<button type="button" class="btn btn-primary jia">+</button>
				</td>
				<td class="xiao">1099</td>
				<td><button type="button" class="btn btn-danger del">删除</button></td>
			</tr>
		</table>
		<p>总数量：<span id="shu" style="color: red; font-weight: bold; font-size: 25px;">0</span>个，总价格：￥<span id="yuan" style="color: red; font-weight: bold; font-size: 25px;">0</span>元</p>
		<button type="button" class="btn btn-primary quanxuan">全选</button>
		<button type="button" class="btn btn-primary quanno">全不选</button>
		<button type="button" class="btn btn-primary fanxuan">反选</button>
		<button type="button" class="btn btn-danger piliang">批量删除</button>
	</body>
</html>
<script>
	
	//加号
	$(".jia").click(function(){
		
		//增加数量
		var num=$(this).prev().text();
		var last_num=Number(num)+1;
		$(this).prev().text(last_num);
		
		//更改小计价格
		var danjia=$(this).parent().prev().text();
		var xiaoji=last_num*Number(danjia);
		$(this).parent().next().text(xiaoji);
		
		tong();
	})
	
	//减号
	$(".jian").click(function(){
		
		//减少数量
		var num=$(this).next().text();
		var last_num=Number(num)-1<=1?1:Number(num)-1;
		$(this).next().text(last_num);
		
		//更改小计价格
		var danjia=$(this).parent().prev().text();
		var xiaoji=last_num*Number(danjia);
		$(this).parent().next().text(xiaoji);
		
		tong();
	})
	
	//行删除
	$(".del").click(function(){
		var str=confirm('确认删除么？');
		if(str)
		{
			$(this).parents('tr').remove();
		}
		
		tong();
	})
	
	//全选
	$(".quanxuan").click(function(){
		var str=$(":checkbox[name=all]");
		$(str).each(function(k,v){
			v.checked=true;
		})
		
		tong()
	})
	
	//全不选
	$(".quanno").click(function(){
		var str=$(":checkbox[name=all]");
		$(str).each(function(k,v){
			v.checked=false;
		})
		
		tong()
	})
	
	//反选
	$(".fanxuan").click(function(){
		var str=$(":checkbox[name=all]");
		$(str).each(function(k,v){
			if(v.checked==true)
			{
				v.checked=false;
			}
			else
			{
				v.checked=true;
			}
		})
		
		tong()
	})
	
	//批量删除
	$(".piliang").click(function(){
		var str=$(":checkbox[name=all]");
		if(confirm('确定都删除么？'))
		{
			$(str).each(function(k,v){
			if(v.checked==true)
				{
					v.parentNode.parentNode.remove();
				}
			})
		}
		
		tong();
	})
	
	//统计和总价
	function tong(){
		var str=$(":checkbox[name=all]:checked");
		$("#shu").text(str.length);
		var sum=0;
		for(var i=0;i<str.length;i++)
		{
			var n=$(str[i]).parents('tr').find('.xiao').text();
			sum+=Number(n)
		}
		$("#yuan").text(sum);
	}
	
	//单击选择框
	$(":checkbox[name=all]").click(function(){
		tong()
	})
</script>

Dragon-v
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
html+css+jquery实现简单的购物车功能
Luck_And_Destiny的博客
07-24 642
HTML网页代码 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <h1>真划算</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th&gt
html购物车页面
01-08
今天博主给大家分享一个自己做的购物车页面，使用的是html+css实现： 话不多说，直接上图： 这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的 以下是相关代码： index.html 商品名称 单价 数量 操作 旁氏洗发露 99 1 删除 旁氏洗发露 99 1 删除 小计： 总数： 确认购买 全部清空 car.css body{ overflow: hidden; text-align: center; } .car{ width:60%; bord
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1312
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
HTML5点击添加商品购物车代码 v1.0
10-06
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交
HTML购物车示例（勾选、删除、添加和结算功能）
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
05-05 9802
以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。
Html购物车
热门推荐
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
前端购物车页面
qq_59527682的博客
11-25 668
<!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"> </head> <body>.
加入购物车列表 HTML + CSS + js
W256999的博客
07-03 1207
【代码】加入购物车列表 HTML + CSS + js。
HTML+CSS+JS+PHP+Jquery 实现HUAWEI商城
07-25
在本项目中，“HTML+CSS+JS+PHP+Jquery 实现HUAWEI商城”是一个综合性的前端和后端开发实例，旨在帮助初学者掌握Web开发的基本技能。以下是各个技术在实现过程中所扮演的角色及相关的知识点： 1. **HTML（HyperText...
html+css+javascript+jquery静态商城模板包括首页登录注册个人中心购物车结算支付页面
04-07
每个商品的基本信息（如名称、图片、价格）。 筛选和排序功能，帮助用户找到他们想要的商品。 商品详情页 (Product Detail Pages) 商品的详细描述，包括图片、价格、规格、库存等。 “添加到购物车”按钮，允许用户...
红色商城购物车订单页面HTML模板
06-07
红色商城购物车订单页面HTML模板，模仿淘宝商城商品订单详情页面，有收货地址、支付方式、配送方式、送货时间、发票信息、确认订单信息、会员留言等订单项目。
html5 css3手机端添加购物车商品列表动画特效
09-08
html5 css3手机端添加购物车商品列表动画特效
蓝色的电子购物商城模板html（购物车和金额数字可变）.zip
02-27
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手，帮助您展示自己的才华和技能。通过使用这套源代码文件，您可以轻松地完成网站搭建任务，为您的课程设计或毕业设计增添亮点。总的来说，这套HTML源代码文件是一个高效、实用、易用的工具，无论你是专业的网页设计师，还是业余的编程爱好者，都值得拥有。
基于前端HTML+CSS+JS+Jquery+后端php+mysql实现仿照当当网的图书商城+源码（高分优秀项目）
05-14
基于前端HTML+CSS+JS+Jquery+后端php+mysql实现仿照当当网的图书商城+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于前端HTML+CSS+JS+Jquery+后端...
jQuery+HTML5+CSS3 实现加入购物车飞入动画特效
09-21
总的来说，这个案例展示了如何利用jQuery的事件处理和动画功能，配合HTML5的结构和数据属性，以及CSS3的动画效果，来创建一个引人入胜的前端交互。学习和研究此案例有助于前端开发者提升技能，理解现代网页动态效果...
html+css+js购物车
09-24
总结，"html+css+js购物车"项目涵盖了前端开发的基本技术栈，从HTML构建页面结构，CSS进行美化和布局，到jQuery实现动态交互和数据计算，再到移动端适配和多店铺计算逻辑，每一个环节都至关重要。通过这个项目，...
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少
m0_70932336的博客
04-03 4065
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。
HTML+JS（购物车案例）
2301_77638787的博客
08-21 2689
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
帮我用 html+css+JavaScript 等技术，做一个购物车
06-08
好的，我可以帮您做一个简单的购物车。首先，我们需要一个 HTML 页面来显示购物车的商品和价格： ```html <!DOCTYPE html> <html> 购物车 /* 定义样式 */ table { width: 100%; border-collapse: collapse...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值