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

9 篇文章 1 订阅
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
    评论
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、付费专栏及课程。

余额充值