html+css+js添加购物车功能

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量3.1w 收藏 139
点赞数 13
分类专栏： JavaScrip html css jquery 文章标签： html javascript 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cx8218/article/details/81205978
版权
html 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
JavaScrip
9 篇文章 1 订阅
订阅专栏
css
6 篇文章 0 订阅
订阅专栏

最近想做一个添加商品到购物车的功能，最好添加的时候还能有一点动画，于是就去网上找了一些相关的示例以做参考。

1、点击“加入购物车”按钮商品可以添加到购物车栏。

2、添加过程中有一个飞入的动画。

3、添加完成该按钮就会变成绿色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自己仿做的购物车网页</title>
		<style>
			.goods_list ul{
				width: 1000px;
				margin: 0 auto;
				margin-top: 100px;
			}
			.goods_list ul li{
				float: left;
				width: 240px;
				list-style: none;
				
			}
			.goods_list ul li img{
				margin-left: 20px;
			}
			.goods_list ul li p{
				text-align: center;
			}
			.goods_list ul li p a{
				display: inline-block;
				width:80px;
				height:30px;
				background:red;
				color:#fff;
				line-height:30px;
				font-size:12px;
				border-radius: 5px;
				margin-left: 10px;
				cursor:pointer;
			}
		</style>
		<style>
			.shopingCar{
				width: 350px;
				height:100%;
				position: fixed;
				top: 0;
				right:-310px;
				background: green;
			}
			.kuangk{
				width: 40px;
				height: 100%;
				background:#000;
				position:relative;
				float:left;
			}
			.kuangk a{
				color: #FFFFFF;
				font-size: 12px;
				width:12px;
				position:absolute;
				display:block;
				background: red;
				top:50%;
				left:0;
				padding:10px 14px;
				margin-top:-42px;
				cursor:pointer;
			}
		</style>
        <script src="js/jquery.js"></script>
        <script src="js/tz_fly.js"></script>
	</head>
	<body>
		<!--
        	作者：411987031@qq.com
        	时间：2018-07-20
        	描述：商品列表
        -->
		<div class="goods_list">
			<ul>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px" />
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
			</ul>
			<ul>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
				<li>
					<img src="img/hua.jpg" alt="花" width="200px" height="200px"/>
					<p class="top_name">月季花--花中皇后(粉色)</p>
					<p><span>￥200.0</span><a>加入购物车</a></p>
				</li>
			</ul>
		</div>
		
		<!--
        	作者：411987031@qq.com
        	时间：2018-07-24
        	描述：购物车
        -->
        <div class="shopingCar">
        	<div class="kuangk">
        		<a>添加到购物车</a>
        	</div>
        	<div class="lieb">
        		
        	</div>
        </div>
        
        <!--
        	作者：411987031@qq.com
        	时间：2018-07-25
        	描述：购物车
        -->
        <script>
        	//点击展开购物车侧边栏
        	var k = 0;
        	$(".shopingCar .kuangk a").click(function(){
				if(k==0){
					$(".shopingCar").animate({right:"0px"},500);
					k=1;
				}else if(k==1){
					$(".shopingCar").animate({right:"-310px"},500);
					k=0;
				}		
			});
			//点击添加商品进入购物车栏
			$(".goods_list ul li p a").click(function(){
				$(this).css("background","green");//点击添加按钮按钮变成绿色
				
				var img = $(this).parent().siblings("img").attr("src");
				var txt = $(this).parent().siblings("p.top_name").html();
				var money = $(this).siblings("span").html();
				$(".lieb").append("<img style='float:left' src='"+img+"' width='50' height='50' /><p style='float:left'>"+txt+"</p><p style='float:left'>"+money+"</p><br/>");
				play(event);
			});
			//商品飞入购物车动画
			function play(event){
				var s_left =event.clientX;//获取鼠标左边的位置
				var s_top =event.clientY;//获取鼠标上边的位置
				var e_left =$(".shopingCar .kuangk a").offset().left;
				var e_top =$(".shopingCar .kuangk a").offset().top;
				var _this =$(event.target);//当前到点击的js对象
				var img = _this.parent().siblings("img").attr("src");
				var flyer =$("<img src='"+img+"' width='50' style='border-radius:50%'/>");//创建图片对象
				flyer.fly({
					start:{
						left:s_left,
						top:s_top
					},
					end:{
						left:e_left,
						top:e_top
					},
					onEnd:function(){
						flyer.fadeOut("slow",function(){
							$(this).remove();
						});
					}
				})
			}
        </script>
	</body>
</html>

完成效果截图如下：

 

这个代码我是仿造的一个类似的代码写的，该代码源文件为：http://www.htmlsucai.com/forum.php?mod=viewthread&tid=7420&highlight=%E5%A4%A9%E7%8C%AB%E8%B4%AD%E7%89%A9%E8%BD%A6

 

棠梨染青衣
关注
  • 13
    点赞
  • 踩
  • 139
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
原生html+js+css添加购物车效果
03-06
使用原生的html+js+css实现添加至购物车的效果，带动画。
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1149
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
购物车实现增删 商品数的底层逻辑js 无委托
qq_45812595的博客
12-07 919
运行展示页面 先布置html布局 <div id="formDiv"> <h4>添加商品</h4> <table> <tr> <td class="word">商品名称：</td> <td class="inp"> <input typ.
HTML5点击添加商品购物车代码.rar
05-27
HTML5点击添加商品购物车代码基于Bootstrap jQuery制作，点击商品添加购物车，累计计价等功能。
js实现添加购物车功能
素描本里的男子的博客
05-15 8662
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } table { ...
HTML,CSS,JS完成购物车功能
weixin_43964414的博客
03-25 5141
在写购物车代码时，要明确思路。 初始状态，当我选中某件商品时，总数量栏，总价栏显示默认数量和总价。 当我点击全选按钮时，所有的复选框都要被我选到。当我取消全选按钮时，所有商品都要取消选中状态。 当购物车处于全选状态时，如果我取消选中某一件商品，全选按钮就要处于未被选中的状态。 当选中某个商品时，我可以对它进行任何操作，包括：增加、减少、删除。 当我点击结算时，系统告诉我购物的总价。 通过HT...
tp5 模拟商品详情添加购物车处理及HTML
孤单的时候狗作陪！的博客
11-28 722
public function details($id){ //商品sku的信息,goods,goods_images,spec_goods $goods = \app\common\model\Goods::with('specGoods,goodsImages')->find($id)->toArray(); // print_r($goods); if(!empty($goods['spec_goods'])){ ..
HTML代码实现简易购物车-web前端教程
热门推荐
web前端入门基础进阶教程-htmlcssjs
07-04 1万+
网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享了HTML代码实现简易购物车，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。 第一步：首先是进行html页面的设计，我用一个大的p将所有商品包含，然后用不同的p将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）： > <p id="goods"> > &g
js+html实现购物车功能
qq_60761302的博客
05-10 2980
用js+html实现简单的淘宝购物车功能，功能基本实现，且逻辑合理
HTML+CSS+JS手机端购物车demo
10-18
在本项目"HTML+CSS+JS手机端购物车demo"中，我们将探讨如何利用前端技术栈，特别是HTML、CSS和JavaScript（以及Vue.js框架），来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...
html+css+js 实现 精美购物车插件
11-23
在本项目中，"html+css+js 实现 精美购物车插件"是一个典型的前端开发案例，它展示了如何使用HTML、CSS和JavaScript这三种核心技术来构建一个功能完善的购物车系统。以下是对这个项目的详细解读： 首先，HTML...
HTML5+CSS3移动商城-购物车
04-29
在这个“HTML5+CSS3移动商城-购物车”项目中，我们将探讨如何利用这两种技术来实现一个功能完备且用户体验良好的移动购物车系统。 1. **HTML5的新特性** - **离线存储**：通过`Application Cache`，可以缓存商城...
html+css+js购物车
09-24
总结，"html+css+js购物车"项目涵盖了前端开发的基本技术栈，从HTML构建页面结构，CSS进行美化和布局，到jQuery实现动态交互和数据计算，再到移动端适配和多店铺计算逻辑，每一个环节都至关重要。通过这个项目，...
基于css+html+js的购物车
mlxgzz的博客
07-12 3066
如何插入一段漂亮的代码片 根据CSDN一位老哥的代码进行完善，加入了部分限制,例如，限制可以购买的数量不能高于库存，同一件商品多次加入购物车只显示一个条目等。原帖：https://blog.csdn.net/vayne_xiao/article/details/54572615 直接复制就可使用。 <!DOCTYPE html> <html> <head>...
17_购物车删除商品与清空购物车
方圆几里
04-12 8276
购物车删除商品与清空购物车 步骤分析 1）步骤分析 从购物车中删除商品 在购物车页面上，点击删除：${path}/cart/remove?pid=xxx 在CartServlet处理删除路径 先获取商品pid 获取购物车 删除购物车项 重定向到/jsp/cart.jsp 清空购物车 在购物车页面上，有一个清空购物车的连接：${path}/cart/clear 在CartServlet中处...
HTML+css+JavaScript实现购物车功能代码
05-17
HTML: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="cart-list"> <tr> <td>商品1</td> <td>100</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>100</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品2</td> <td>200</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>200</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品3</td> <td>300</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>300</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> </tbody> <tfoot> <tr> <th colspan="3">合计：</th> <th id="total-price">600</th> <th><button onclick="clearCart()">清空购物车</button></th> </tr> </tfoot> </table> </body> <script src="script.js"></script> </html> ``` CSS: ```css table { border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #eee; } button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } input[type="number"] { width: 50px; text-align: center; } ``` JavaScript: ```javascript // 获取购物车商品列表 let cartList = document.getElementById('cart-list').rows; // 计算总价 function calcTotalPrice() { let totalPrice = 0; for (let i = 1; i < cartList.length - 1; i++) { let quantity = cartList[i].cells[2].children[0].value; let price = cartList[i].cells[1].innerHTML; let subtotal = quantity * price; cartList[i].cells[3].innerHTML = subtotal; totalPrice += subtotal; } document.getElementById('total-price').innerHTML = totalPrice; } // 改变商品数量 function changeQuantity(input) { if (input.value < 1) { input.value = 1; } calcTotalPrice(); } // 删除商品 function removeItem(button) { let row = button.parentNode.parentNode; row.parentNode.removeChild(row); calcTotalPrice(); } // 清空购物车 function clearCart() { for (let i = 1; i < cartList.length - 1; i++) { cartList[i].parentNode.removeChild(cartList[i]); } document.getElementById('total-price').innerHTML = 0; } ``` 这段代码实现了一个简单的购物车功能，可以添加商品、删除商品、修改数量，并且会实时计算总价。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值