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

最新推荐文章于 2024-06-18 17:19:20 发布
最新推荐文章于 2024-06-18 17:19:20 发布
阅读量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+js）
姜翰翰的博客
03-24 7163
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多选购物车</title> <style> .delete{ border: none; color: blue; background-color: white; width:...
基础购物车（Javascript）
最新发布
2301_81449444的博客
06-18 370
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
购物车html代码
03-19
青软实训《web前端设计与开发》 2-1~3-2贯穿项目代码 html5
html添加到购物车飞入动画效果,CSS3-购物车飞入动画
weixin_42515024的博客
06-05 597
购物车飞入动画：.con{width: 1000px;height: 700px;border: 1px solid transparent;position:relative;}.che{width: 200px;height:200px;background-image: url("img/c.jpg");background-repeat: no-repeat;margin-top: 1...
js实现添加购物车功能
素描本里的男子的博客
05-15 8673
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } table { ...
购物车全过程html+css+js
热门推荐
qq_275487025的博客
08-10 2万+
html: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;购物车&amp;lt;/
加入购物车代码
05-16
加入购物车
基于css+html+js的购物车
mlxgzz的博客
07-12 3081
如何插入一段漂亮的代码片 根据CSDN一位老哥的代码进行完善，加入了部分限制,例如，限制可以购买的数量不能高于库存，同一件商品多次加入购物车只显示一个条目等。原帖：https://blog.csdn.net/vayne_xiao/article/details/54572615 直接复制就可使用。 <!DOCTYPE html> <html> <head>...
HTML5点击添加商品购物车代码源代码
03-15
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交互。
HTML,CSS,JS完成购物车功能
weixin_43964414的博客
03-25 5150
在写购物车代码时，要明确思路。 初始状态，当我选中某件商品时，总数量栏，总价栏显示默认数量和总价。 当我点击全选按钮时，所有的复选框都要被我选到。当我取消全选按钮时，所有商品都要取消选中状态。 当购物车处于全选状态时，如果我取消选中某一件商品，全选按钮就要处于未被选中的状态。 当选中某个商品时，我可以对它进行任何操作，包括：增加、减少、删除。 当我点击结算时，系统告诉我购物的总价。 通过HT...
HTML5点击添加商品购物车代码.rar
05-27
HTML5点击添加商品购物车代码基于Bootstrap jQuery制作，点击商品添加购物车，累计计价等功能。
html购物车效果,模拟加入购物车效果
weixin_29913191的博客
06-04 245
html>模拟加入购物车效果*{margin:0pxauto;padding:0px;}.top{width:402px;height:35px;line-height:35px;text-align:center;margin-top:50px;background:#C40000;color:#fff;}.main{width:400px;height:400p...
html 立即购买按钮,php-Woocommerce-产品页面上的“添加到购物车和立即购买”按钮...
weixin_35377249的博客
06-21 1096
我试图在产品页面的Woocommerce中添加“立即购买”按钮,所以有两个按钮：>添加到购物车>立即购买(将产品添加到购物车并重定向到结帐)我仍然想添加到购物车以照常运行.我该如何实现？非常感谢.解决方法:如果其他人发现他们正在努力实现这一目标,这就是我做到的方式(可能不是最好的解决方案,但对我有用)：我将以下文本复制到我的主题functions.php中/** * Set cart ...
实现网页购物车功能，完成基本的商品价格计算等功能
qq_38902844的博客
05-20 7578
效果图 说明 html, css, js 代码分别保存 index.html , main.css, main.js 文件中，而main.css 和 main.js 文件又分别保存在 css 和 js 文件夹下。3张素材图片保存在 images 目录下，具体情况见下图： 素材图片 pic01.jpg pic02.jpg pic03.jpg 源代码 HTML代码 <!DOCTYPE html> <html lang="en"> <head> &lt
html+css+jquery实现简单的购物车功能
Luck_And_Destiny的博客
07-24 641
HTML网页代码 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <h1>真划算</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th&gt
html如何自动购物,jQuery+HTML5加入购物车代码分享
weixin_39846361的博客
06-01 568
这是一款基于jquery+html5实现的支持累加计价的网站购物车代码，可以把货物添加到购物车，添加物品数量，如果想取消购置某物品，这个功能也是可以实现的。运行效果图：-----------------------------------查看效果-----------------------------------为大家分享的jQuery+HTML5加入购物车代码如下jQuery+HTML5加入购...
html+css+jQuery实现购物车功能
乙壳虫的博客
12-22 6853
购物车 1. 搭建简单的架子 <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8"/> <script src="../jquery-1.9.1.min.js"></...
tp5 模拟商品详情添加购物车处理及HTML
孤单的时候狗作陪！的博客
11-28 724
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+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、付费专栏及课程。

余额充值