复制代码代码如下:
<%@ page Language="java" contentType="text/html; charset=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">
<html>
<голова>
<meta content="width=device-width, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=нет" name="viewport">
<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>
<title>购物车</title>
<style type="text/css">
тело{
фон: #fefbe6;
выравнивание текста: по центру;
маржа: 0;
заполнение: 0;
цвет: #500f60;
}
ли {
тип стиля списка: нет;
}
а:ссылка{
тип стиля списка: нет;
}
изображение {
ширина: 100%;
высота: 120 пикселей;
}
#статический{
маржа: 0 авто;
выравнивание текста: по левому краю;
}
#основной{
ширина: 100%;
маржа: 0 авто;
цвет: #530a4a;
позиция: абсолютная;
верх: 110 пикселей;
}
#главная улица{
}
#main ul li{
ширина: 20%;
плавать: влево;
}
#main_t{
позиция: абсолютная;
верх: 140 пикселей;
цвет: #530a4a;
ширина: 100%;
маржа: 0;
заполнение: 0;
размер шрифта: 0,8em;
}
#main_t_l,#main_t_a{
цвет: #3f1262;
ширина: 100%;
размер шрифта: 0,8em;
}
#main_t_l ul li{
ширина: 20%;
плавать: влево;
}
#зон{
фон: #dbfff1;
цвет: #f8cd66;
}
.bot_in{
фон: #f1fcc4;
граница: 3 пикселя #f1fcc4 сплошная;
радиус границы: 6 пикселей 6 пикселей 6 пикселей 6 пикселей;
-moz-border-radius: 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 снизу, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
фон:-o-linear-gradient(top, red, rgba(0, 0, 255, 0,5));
цвет: #fff;
маржа сверху: 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 снизу, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
фон:-o-linear-gradient(top, red, rgba(0, 0, 255, 0,5));
цвет: #fff;
маржа сверху: 6%;
граница: нет;
}
</стиль>
<тип сценария="текст/javascript">
$(функция() {
//点击加号购物车数量增加1
$(".add").live("click",function(){
вар isAdd = правда;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parseFloat($("#totalprice").text());
var цена = parseFloat($(this).closest("ul").find("#price").text());
если (!isNaN(num)) {
число++;
если (число > 99) {
число = 99;
isAdd = ложь;
}
если (isAdd) {
общая цена = общая цена + цена;
}
}
вар общая = число * цена;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
если(data.success==истина){
$("#totalprice").text(общая цена);
}
});
});
//点击加号购物车数量减少1
$(".delete").live("click",function(){
вар isReduce = правда;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parseFloat($("#totalprice").text());
var цена = parseFloat($(this).closest("ul").find("#price").text());
если (!isNaN(num)) {
число--;
если (число < 1) {
число = 1;
isReduce = ложь;
}
если (isReduce) {
общая цена = общая цена - цена;
}
}
вар общая = число * цена;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
если(data.success==истина){
$("#totalprice").text(общая цена);
}
});
});
$("#cha").live("click",function() {
var productId = $(this).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){
если(data.success==истина){
получитьShopCartInfo();
}
});
});
функция getShopCartInfo(){
$.ajax({
тип: «ПОСТ»,
url: "<%=basePath%>findShopCart.action",
успех: функция (данные) {
вар строка = "";
список вар = data.list;
$("#main_t_l").empty();
вар всего = 0;
if(list!=null&&list.length!=0){
for(var i=0;i<list.length;i++){
итог = итог + список[i].цена * список[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=/"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; граница-радиус: 1px 1px 1px 1px;-moz-border-radius: 1px; цвет: #c19268;/" class=/"delete/">-</button>"+
"<button style=/"background: #f5e3d5;border-top: none;border: 1px #f5e3d5 Solid; граница-радиус: 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(итого);
}
}еще {
$("#main_t_l").append("<ul><li style=/"width: 100%;text-align: center;/">您的购物车为空,快去购物吧！</li> </ul>");
$("#totalprice").find("span").text(0);
}
}
});
}
//提交订单
$("#ji").click(function(){
var name = $("#name").val();
вар теле = $("#tele").val();
вар адрес = $("#адрес").val();
var totalprice = $("#totalprice").find("span").text();
если (общая цена == 0) {
alert("购物车为空，不能提交订单!");
возвращаться;
}
если(имя==""){
alert("Необходимый метод!");
возвращаться;
}
если(теле==""){
alert("Оборудование для проверки!");
возвращаться;
}
если(адрес==""){
alert("Необходимый вариант!");
возвращаться;
}
$("#ji").attr("отключено","отключено");
$("#ji").css("background","#808080");
document.getElementById("bgDiv").style.visibility = "видимость";
document.getElementById("myspin").style.visibility = "видимость";
$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){
если (data.success == true) {
получитьShopCartInfo();
alert("Необходимый сигнал");
}еще {
alert("Необходимо, необоснованно, недопустимо!");
$("#ji").addClass("ji");
$("#ji").attr("отключено","");
}
});
});
window.onload = getShopCartInfo();
window.onload = функция() {
document.getElementById("bgDiv").style.visibility = "скрытый";
document.getElementById("myspin").style.visibility = "скрытый";
};
});
// 验证联系方式
функция validTeleNum() {
вар тел = /(^[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 = "";
}
}
}
</скрипт>
</голова>
<тело>
<jsp:include page="../jsp/progress.jsp"></jsp:include>
<div id="статический">
<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 id="main">
<дел>
<ул>
<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=" ширина: 100%; поля сверху: 50 пикселей;">
<div id="zon"><br>
</div>
<table align="center">
<тр>
<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; цвет: #f8cd66;">总计</span>
<button style="background: #f1fcc4; Margin-left:5px;border: 3px #f1fcc4 Solid; border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px; цвет: #000;" id="totalprice"><span></span>￥</button>
<br><br>
</div>
<div style="background: #f1fcc4 ;" выровнять="центр">
<input type="button" id="ji" value="提交订单"></input><br>
<span style="font-size: 2em; цвет: #a6ae87; поле слева: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</тело>
</html>