js购物车

最新推荐文章于 2019-10-12 21:23:17 发布

angel豆蔻年华

最新推荐文章于 2019-10-12 21:23:17 发布

阅读量678

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/u012635819/article/details/17500927

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String id = request.getParameter("id");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单品介绍</title>
<style type="text/css">
#aa {
	float: left;
	margin-left: -12%;
	margin-top: 0px;
}
a:link{
	text-decoration: none;
}
#aa li{
	float: left;
	text-decoration: none;
	list-style-type: none;
	}
.b{
margin-left: -70px;
}
.c{
margin-left: -80px;
}
#aa li img {
	width: 50%;
}
#ma{
	padding: 10px;
	background: #f9edbf;
	width: 55%;
}
#bottom{
margin-top: 10px;
margin-left:5px;
float: left;
}
#bottom_im{
width: 20%;
margin-left: 75%;
margin-top: -25px;
}
#g{
	width:10%;
	margin-top: -18px;
}
#tt{
margin-top: -30px;
margin-left: 60%;
color: #1d5306;
font-size: 1.2em;
}
#main_go {
	background: none repeat scroll 0 0 transparent;
	bottom: -1px;
	font-family: Arial, Helvetica, sans-serif;
	height: 50px;
	width: 95%;
	margin: 0 auto;
	padding: 0;
	position: fixed;
}

#main_go img {
	margin-left: -70px;
	vertical-align: middle;
	position: absolute;
	left: 95%;
	top: 5%;
	width: 50px;
	text-align: center;
}

.jump {
	transition: width 1s, height 1s, transform 1s;
	-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
strong {
	margin: 0 5px;
}
</style> 
<script type="text/javascript">
$(function(){  
	window.onload = function(){
		$.post("<%=basePath%>findProductById.action","id="+$("#id").val(),function(data){
			$("#ma").find("h6").text(data.product.name);  
			$("#ma").find("img").attr("src","../pic/"+data.product.pic);
			$(".pro_size").find("strong").text(data.product.amount);
			$("#price").find("strong").find("span").text(data.product.price);
			$(".pro_price").find("strong").find("span").text(parseFloat(data.product.price) * parseInt($("#num_sort").find("option:selected").text()));
			var star = "<span>规格：</span>";
			for(var i=0;i<data.product.level;i++) {
				star = star+"<img src=\"../pic/xx.png\"  style=\"width: 10%;\"/>";
			}
			$(".pro_rating").empty();
			$(star).appendTo($(".pro_rating"));
			$("#g").closest("a").attr("href","<%=basePath%>jsp/product.jsp?id="+data.product.psortId);
			if(data.product.description!=null){
				var des = data.product.description.split(";");
				var child = $("#bottom");
				if(child!=null){
					child.empty();
				}
				for(var i=0;i<des.length;i++){
					child = $("<p></p>");
					child.text("•"+des[i]);
					$("#bottom").append(child);
				}
			}
		});
	};
	$("#num_sort").change(function(){
		$(".pro_price").find("strong").find("span").text((parseFloat($("#price").find("strong").find("span").text()) * parseInt($(this).find("option:selected").text())).toFixed(1));
	});
	//点击加入购物车
	$("#cart").click(function(){
		var id = $("#id").val();
		var product =$("#ma").find("img");
		var num = $("#num_sort").val();
		var y = $("#main_go img").offset().top-product.offset().top-0.5*product.height()+$("#main_go img").height()*0.5;
		var x = $("#main_go img").offset().left-product.offset().left +$("#main_go img").width()*0.5-product.width()*0.5;
		$.post("<%=basePath%>updateShopCart.action", "productId="
							+ id + "&num="+num, function(data) {
						if (data.success == true) {
							product.addClass("jump");
							product.css("transform", "translate(" + x + "px,"
									+ y + "px) scale(0,0)");
							product.css("-webkit-transform", "translate(" + x
									+ "px," + y + "px) scale(0,0)"); /* Safari */
						}
					});
		});
});
</script>
</head>
<body style="margin: 0; padding: 0;">
<input type="hidden" id="id" value="<%=id%>">
<!--主体内容开始-->
<div id="content" class="global_module" style="width:100%;">
	<img src="../pic/bj_13.jpg"  style="width:100%;"/>
	<a href="javascript:history.go(-1)"><img src="../pic/fan4.png" id="g"></a>
	<div id="tt">
		<span>单品介绍</span>
	</div>
	<div id="head">
		<div id="ma">
			<img alt="" src="" style="width: 100%;"/>
			<h6 style="text-align: center;margin: 10px auto 0px"></h6>
		</div>
		<div style="float: right;margin-top: -40%;">
				<div id="price">商品价格<strong>￥<span></span></strong></div>
				<div class="pro_size">
					总销量<strong></strong>
				</div>
	            <div class="pro_rating">
					<span>规格：</span>
				</div>
				<div class="pro_num">数量：
					<select id="num_sort" style="width:40px;" >
						<%for(int i=1;i<100;i++){ %>
						<option value="<%=i%>"><%=i%></option>
						<%} %>
					</select>
					<div class="pro_price">
						总计：<strong><span></span>￥</strong>
					</div>
					<div id="cart">
						<a href="##"><img src="../pic/btn_cart.png"/></a>
					</div>
				</div>
		</div>
	</div>
	<div id="bottom">
    </div>
    <div id="main_go">
		<img src="<%=basePath%>pic/gouwu.png" οnclick="window.location.href='gou.jsp'">
	</div>
</div>
<!--主体内容结束-->
</body>
</html>

angel豆蔻年华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js购物车

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS
复制链接

扫一扫