复制代码代码如下 :
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
Chemin de chaîne = request.getContextPath();
Chaîne basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ chemin + "/" ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<tête>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<méta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<title>购物车</title>
<style type="text/css">
corps{
arrière-plan : #fefbe6 ;
alignement du texte : centre ;
marge : 0 ;
remplissage : 0 ;
couleur : #500f60 ;
}
li{
type de style de liste : aucun ;
}
a:lien{
type de style de liste : aucun ;
}
img{
largeur : 100 % ;
hauteur : 120px ;
}
#statique{
marge : 0 automatique ;
aligner le texte : gauche ;
}
#principal{
largeur : 100 % ;
marge : 0 automatique ;
couleur : #530a4a ;
position : absolue ;
haut : 110 px ;
}
#mainul{
}
#main ul li{
largeur : 20 % ;
flotteur : gauche ;
}
#main_t{
position : absolue ;
haut : 140 px ;
couleur : #530a4a ;
largeur : 100 % ;
marge : 0 ;
remplissage : 0 ;
taille de police : 0,8 em ;
}
#main_t_l,#main_t_a{
couleur : #3f1262 ;
largeur : 100 % ;
taille de police : 0,8 em ;
}
#main_t_l ul li{
largeur : 20 % ;
flotteur : gauche ;
}
#zon{
arrière-plan : #dbfff1 ;
couleur : #f8cd66 ;
}
.bot_in{
arrière-plan : #f1fcc4 ;
bordure : 3px #f1fcc4 solide ;
rayon de bordure : 6px 6px 6px 6px ;
-moz-border-radius : 6px ;
}
#ji{
largeur : 130 px ;
hauteur : 30 px ;
filtre:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType= 0);/*IE8*/
fond : rouge ;
background:-moz-linear-gradient(haut, rouge, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
background:-o-linear-gradient(haut, rouge, rgba(0, 0, 255, 0.5));
couleur : #fff ;
marge supérieure : 6 % ;
bordure : aucune ;
}
.ji {
largeur : 130 px ;
hauteur : 30 px ;
filtre:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType= 0);/*IE8*/
fond : rouge ;
background:-moz-linear-gradient(haut, rouge, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
background:-o-linear-gradient(haut, rouge, rgba(0, 0, 255, 0.5));
couleur : #fff ;
marge supérieure : 6 % ;
bordure : aucune ;
}
</style>
<script type="text/javascript">
$(fonction() {
//点击加号购物车数量增加1
$(".add").live("clic",function(){
var isAdd = vrai ;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var prix total = parseFloat($("#totalprice").text());
var price = parseFloat($(this).closest("ul").find("#price").text());
si (!isNaN(num)) {
num++;
si (nombre > 99) {
nombre = 99 ;
estAjoute = faux ;
}
si (estAjouter) {
prix total = prix total + prix ;
}
}
var total = num * prix ;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
si(data.success==true){
$("#prixtotal").text(prixtotal);
}
});
});
//点击加号购物车数量减少1
$(".delete").live("clic",function(){
var isReduce = vrai;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var prix total = parseFloat($("#totalprice").text());
var price = parseFloat($(this).closest("ul").find("#price").text());
si (!isNaN(num)) {
num--;
si (num < 1) {
nombre = 1 ;
isReduce = faux;
}
si(estRéduire){
prix total = prix total - prix ;
}
}
var total = num * prix ;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
si(data.success==true){
$("#prixtotal").text(prixtotal);
}
});
});
$("#cha").live("clic",function() {
var productId = $(this).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){
si(data.success==true){
getShopCartInfo();
}
});
});
fonction getShopCartInfo(){
$.ajax({
tapez : "POST",
url : "<%=basePath%>findShopCart.action",
succès : fonction (données) {
var ligne = "";
var liste = data.list;
$("#main_t_l").empty();
variable total = 0 ;
if(list!=null&&list.length!=0){
pour(var i=0;i<list.length;i++){
total = total + liste[i].prix * liste[i].num;
ligne = "<ul>"+
"<li style="width : 17%;text-align: center;/">"+list[i].productname+"</li>"+
"<li style=/"width : 17%;text-align: center;/" id=/"price/">"+list[i].price+"￥</li>"+
"<li style=/"largeur : 30 %;alignement du texte : centre;/">"+
"<input type=/"hidden/" id=/"productId/" value="+list[i].id+">"+
"<button style="background: #dbddd4;border-top: none;border: 1px #dbddd4 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px;/" id=/"num/">"+list[i].num+"</button>"+
"<button style="background: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; border-radius : 1px 1px 1px 1px;-moz-border-radius : 1px; couleur : #c19268;/" class="delete/">-</button>"+
"<button style="background: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; border-radius : 1px 1px 1px 1px;-moz-border-radius : 1px; couleur : #c19268;/" class="add/">+</button>"+
"</li>"+
"<li style=/"width : 18%;text-align: center;/"><span id=/"total/">"+list[i].totalprice+"￥</span></li>" +
"<li style=/"largeur : 18 %;alignement du texte : centre;/">"+
"<img src=/"<%=basePath%>image/cha.png/" style=/"largeur : 25px;hauteur : 25px/" id=/"cha/">"+
"</li>"+
"</ul>"+
"<hr size=/"3px;/" color=/"#c1c1c1/" style=/"largeur : 100%;/">";
$(row).appendTo($("#main_t_l"));
$("#prixtotal").find("span").text(total);
}
}autre {
$("#main_t_l").append("<ul><li style=/"width: 100%;text-align: center;/">您的购物车为空,快去购物吧！</li> </ul>");
$("#prixtotal").find("span").text(0);
}
}
});
}
//提交订单
$("#ji").click(function(){
var nom = $("#nom").val();
var télé = $("#tele").val();
var adresse = $("#adresse").val();
var prix total = $("#prixtotal").find("span").text();
si(prix total == 0){
alert("购物车为空，不能提交订单!");
retour;
}
si(nom==""){
alert("姓名不能为空!");
retour;
}
si(tele==""){
alert("电话不能为空!");
retour;
}
si(adresse==""){
alert("地址不能为空!");
retour;
}
$("#ji").attr("disabled","disabled");
$("#ji").css("background","#808080");
document.getElementById("bgDiv").style.visibility = "visibilité";
document.getElementById("myspin").style.visibility = "visibilité";
$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){
si (data.success == true) {
getShopCartInfo();
alert("提交成功");
}autre {
alert("提交失败,请重新提交!");
$("#ji").addClass("ji");
$("#ji").attr("disabled","");
}
});
});
window.onload = getShopCartInfo();
window.onload = fonction() {
document.getElementById("bgDiv").style.visibility = "caché";
document.getElementById("myspin").style.visibility = "hidden";
} ;
});
//验证联系方式
fonction validTeleNum() {
var tél = /(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3 ,4}/-[0-9]{7,8}$) |(^[0-9]{7,8}$)|(^/([0-9]{3,4}/)[0-9]{3,8}$)|(^0{0 ,1}13[0-9]{9}$)/;
if (document.getElementById("tele").value != '') {
if (!tel.test(document.getElementById("tele").value)) {
alert("联系电话格式不正确,请重新输入!");
document.getElementById("tele").value = "";
}
}
}
</script>
</tête>
<corps>
<jsp:include page="../jsp/progress.jsp"></jsp:include>
<div id="statique">
<div style="text-align: gauche;">
<a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png"></a>
<img src="<%=basePath %>pic/top5.jpg">
</div>
<div>
<div id="main">
<div>
<ul>
<li>单品</li>
<li>价格</li>
<li>数量</li>
<li>合计</li>
<li>删除</li>
</ul>
</div>
</div>
<div id="main_t">
<div id="main_t_l" style="margin-top: 20px;">
</div>
<div id="main_t_a" style="margin-top: 20px;">
<hr size="3px;" color="#c1c1c1" style="largeur : 100 % ; marge supérieure : 50 px ;">
<div id="zon"><br>
</div>
<table align="centre">
<tr>
<td>姓名 :</td>
<td><input type="text" id="nom"/></td>
</tr>
<tr>
<td>联系方式 :</td>
<td><input type="text" id="tele" onblur="validTeleNum()"/></td>
</tr>
<tr>
<td>地址 :</td>
<td><input type="text" id="adresse"/></td>
</tr>
</table>
<div style="margin-left:60%;">
<span style="font-size: 1.2em; color: #f8cd66;">总计</span>
<button style="background: #f1fcc4; margin-left:5px;border: 3px #f1fcc4 solid; border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px; color: #000;" id="prix total"><span></span>￥</button>
<br><br>
</div>
<div style="fond : #f1fcc4 ;" align="centre">
<input type="button" id="ji" value="提交订单"></input><br>
<span style="font-size : 2em ; couleur : #a6ae87 ; marge gauche : 93 % ;">></span>
</div>
</div>
</div>
</div>
</div>
</corps>
</html>