معلومات المنتج:
<%@ لغة الصفحة = "Java" contentType = "text/html؛ مجموعة الأحرف = utf-8"
pageEncoding="utf-8"%>
<%
مسار السلسلة = request.getContextPath();
سلسلة BasePath = request.getScheme() + "://"
+ request.getServerName() + ":: + request.getServerPort()
+ المسار + "/"؛
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<أتش تي أم أل>
<الرأس>
<محتوى التعريف = "العرض = عرض الجهاز، المقياس الأولي = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا" اسم = "منفذ العرض">
<meta 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>
<العنوان>العنوان>العنوان>
<نمط النوع = "نص/CSS">
جسم{
الخلفية: #fefbe6؛
محاذاة النص: مركز؛
الهامش: 0;
الحشو: 0؛
اللون: #500f60؛
}
لي {
نوع نمط القائمة: لا شيء؛
}
أ:رابط{
نوع نمط القائمة: لا شيء؛
}
إم جي {
العرض: 100%؛
الارتفاع: 120 بكسل؛
}
#ثابت{
الهامش: 0 تلقائي؛
محاذاة النص: يسار؛
}
#رئيسي{
العرض: 100%؛
الهامش: 0 تلقائي؛
اللون: #530a4a؛
الموقف: مطلق؛
أعلى: 110 بكسل؛
}
#الرئيسي{
}
#الرئيسي لي{
العرض: 20%؛
تعويم: يسار؛
}
#الرئيسية_ت{
الموقف: مطلق؛
أعلى: 140 بكسل؛
اللون: #530a4a؛
العرض: 100%؛
الهامش: 0;
الحشو: 0؛
حجم الخط: 0.8em؛
}
#main_t_l,#main_t_a{
اللون: #3f1262؛
العرض: 100%؛
حجم الخط: 0.8em؛
}
#main_t_l أول لي{
العرض: 20%؛
تعويم: يسار؛
}
#منطقة{
الخلفية: #dbffff1؛
اللون: #f8cd66؛
}
.بوت_ين{
الخلفية: #f1fcc4؛
الحدود: 3px #f1fcc4 صلب؛
نصف قطر الحدود: 6px 6px 6px 6px ؛
-moz-border-radius: 6px؛
}
#جي{
العرض: 130 بكسل؛
الارتفاع: 30 بكسل؛
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);
-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*/
الخلفية: أحمر؛
الخلفية: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
الخلفية: -webkit-gradient(linear, 0 0, 0 Bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
الخلفية: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
اللون: #ففف؛
الهامش العلوي:6%؛
الحدود: لا شيء؛
}
.جي {
العرض: 130 بكسل؛
الارتفاع: 30 بكسل؛
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);
-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*/
الخلفية: أحمر؛
الخلفية: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
الخلفية: -webkit-gradient(linear, 0 0, 0 Bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
الخلفية: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
اللون: #ففف؛
الهامش العلوي:6%؛
الحدود: لا شيء؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
$(وظيفة() {
//الحصول على أفضل النتائج 1
$(".add").live("click",function(){
var isAdd = true;
var num = parseInt($(this). Closest("li").find("#num").text());
فار منتج معرف = $(هذا).أقرب("li").find("#productId").val();
فار Totalprice = parseFloat($("#totalprice").text());
فار السعر = parseFloat($(this). Closest("ul").find("#price").text());
إذا (!isNaN(num)) {
رقم++;
إذا (رقم > 99) {
الأعداد = 99؛
isAdd = false;
}
إذا (إضافة) {
السعر الإجمالي = السعر الإجمالي + السعر؛
}
}
إجمالي فار = العدد * السعر؛
$(هذا).أقرب("لي").find("#num").text(num);
$(هذا).أقرب("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action",productId="+productId+"&num="+num,function(data){
إذا (data.success==صحيح){
$("#totalprice").text(totalprice);
}
});
});
// 点击加号购物车数量减少1
$(".delete").live("click",function(){
var isReduce = true;
var num = parseInt($(this). Closest("li").find("#num").text());
فار منتج معرف = $(هذا).أقرب("li").find("#productId").val();
فار Totalprice = parseFloat($("#totalprice").text());
فار السعر = parseFloat($(this). Closest("ul").find("#price").text());
إذا (!isNaN(num)) {
الأسطوانات--؛
إذا (رقم < 1) {
الأعداد = 1؛
isReduce = false;
}
إذا (هو تقليل) {
السعر الإجمالي = السعر الإجمالي - السعر؛
}
}
إجمالي فار = العدد * السعر؛
$(هذا).أقرب("لي").find("#num").text(num);
$(هذا).أقرب("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action",productId="+productId+"&num="+num,function(data){
إذا (data.success==صحيح){
$("#totalprice").text(totalprice);
}
});
});
$("#cha").live("click",function() {
فار المنتج = $(هذا).أقرب("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action"،productId="+productId,function(data){
إذا (data.success==صحيح){
getShopCartInfo();
}
});
});
وظيفة getShopCartInfo(){
$.اجاكس({
النوع: "منشور"،
عنوان url : "<%=basePath%>findShopCart.action"،
النجاح: الوظيفة (البيانات) {
صف فار = "";
قائمة فار = data.list;
$("#main_t_l").empty();
فار الإجمالي = 0؛
إذا (قائمة!=null&&list.length!=0){
for(var i=0;i<list.length;i++){
Total = Total + list[i].price * list[i].num;
صف = "<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=/"width: 30%;text-align: center;/">"+
"<input type=/"hidden/" id=/"productId/" value="+list[i].id+">"+
"<button style=/"الخلفية: #dbddd4;الحدود العلوية: لا شيء;الحدود: 1px #dbddd4 Solid; نصف قطر الحدود: 1px 1px 1px 1px;-moz-border-radius: 1px;/" id=/"num/">"+list[i].num+"</button>"+
"<button style=/"الخلفية: #f5e3d5;الحدود العلوية: لا شيء;الحدود: 1px #f5e3d5 صلب; نصف قطر الحدود: 1px 1px 1px 1px؛-moz-border-radius: 1px؛ اللون: #c19268;/" class=/"delete/">-</button>"+
"<button style=/"الخلفية: #f5e3d5;الحدود العلوية: لا شيء;الحدود: 1px #f5e3d5 صلب; نصف قطر الحدود: 1px 1px 1px 1px؛-moz-border-radius: 1px؛ اللون: #c19268;/" class=/"add/">+</button>"+
"</li>"+
"<li style=/"width: 18%;text-align: center;/"><span id=/"total/">"+list[i].totalprice+"￥</span></li>" +
"<li style=/"width: 18%;text-align: center;/">"+
"<img src=/"<%=basePath%>image/cha.png/" style=/"width: 25px;height: 25px/" id=/"cha/">"+
"</li>"+
"</ul>"+
"<hr size=/"3px;/" color=/"#c1c1c1/" style=/"width: 100%;/">";
$(row).appendTo($("#main_t_l"));
$("#totalprice").find("span").text(total);
}
}آخر {
$("#main_t_l").append("<ul><li style=/"width: 100%;text-align: center;/">الصفحة الرئيسية للموقع، محاذاة النص!</li> </ul>");
$("#totalprice").find("span").text(0);
}
}
});
}
// 提交订单
$("#جي").انقر(وظيفة(){
اسم فار = $("#name").val();
var tele = $("#tele").val();
عنوان فار = $("#address").val();
فار Totalprice = $("#totalprice").find("span").text();
إذا (السعر الإجمالي == 0){
تنبيه("购物车为空,不能提交订单!");
يعود؛
}
إذا (الاسم = = ""){
تنبيه("姓名不能为空!");
يعود؛
}
إذا (عن بعد = = "") {
تنبيه("电话不能为空!");
يعود؛
}
إذا (العنوان = = "") {
تنبيه("地址不能为空!");
يعود؛
}
$("#ji").attr("disabled"،disabled");
$("#ji").css("background"،#808080");
document.getElementById("bgDiv").style.visibility = "visibility";
document.getElementById("myspin").style.visibility = "visibility";
$.post("<%=basePath%>addShopCart.action",name="+name+"&telephone="+tele+"&address="+address,function(data){
إذا (data.success == صحيح) {
getShopCartInfo();
تنبيه("提交成功");
}آخر {
تنبيه ("الإجابة على السؤال، إجابة على السؤال!")؛
$("#ji").addClass("ji");
$("#ji").attr("disabled"،");
}
});
});
window.onload = getShopCartInfo();
نافذة.onload = وظيفة () {
document.getElementById("bgDiv").style.visibility = "hidden";
document.getElementById("myspin").style.visibility = "hidden";
};
});
// قم بالتسجيل في الموقع
الدالة صالحةTeleNum() {
فار الهاتف = /(^[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}$)/;
إذا (document.getElementById("tele").value != '') {
إذا (!tel.test(document.getElementById("tele").value)) {
تنبيه("联系电话格式不正确,请重新输入!");
document.getElementById("tele").value = "";
}
}
}
</script>
</الرأس>
<الجسم>
<jsp:include page="../jsp/progress.jsp"></jsp:include>
<div معرف = "ثابت">
<div style="text-align: left;">
<a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png"></a>
<img src="<%=basePath %>pic/top5.jpg">
</div>
<ديف>
<div معرف = "الرئيسية">
<ديف>
<ul>
<li>单品</li>
<li>价格</li>
<li> 数量 </li>
<li>合计</li>
<li>删除</li>
</ul>
</div>
</div>
<div معرف = "main_t">
<div id="main_t_l" style="margin-top: 20px;">
</div>
<div id="main_t_a" style="margin-top: 20px;">
<حجم الساعة = "3 بكسل؛" اللون = "#c1c1c1" style = "العرض: 100%؛ الهامش العلوي: 50 بكسل؛">
<div معرف = "زون"> <br>
</div>
<جدول محاذاة = "المركز">
<تر>
<td>اسم المنتج:</td>
<td><input type="text" id="name"/></td>
</tr>
<تر>
<td>المنتج:</td>
<td><input type="text" id="tele" onblur="validTeleNum()"/></td>
</tr>
<تر>
<td>العنوان:</td>
<td><input type="text" id="address"/></td>
</tr>
</الجدول>
<div style="margin-left:60%;">
<span style="font-size: 1.2em; color: #f8cd66;">اللون</span>
<زر نمط = "الخلفية: #f1fcc4؛ الهامش الأيسر: 5px؛ الحدود: 3px #f1fcc4 الصلبة؛ نصف قطر الحدود: 3px 3px 3px 3px؛-moz-border-radius: 3px؛ اللون: #000؛" id="totalprice"><span></span>￥</button>
<br><br>
</div>
<div style="background: #f1fcc4 ;" محاذاة = "المركز">
<نوع الإدخال = "زر" معرف = "جي" قيمة = "提交订单"></input><br>
<span style="font-size: 2em; اللون: #a6ae87; الهامش الأيسر: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</الجسم>
</html>