复制代码代码如下:
<%@ halaman bahasa="java" contentType="teks/html; charset=utf-8"
halamanEncoding="utf-8"%>
<%
Jalur string = permintaan.getContextPath();
String basePath = permintaan.getScheme() + "://"
+ permintaan.getServerName() + ":" + permintaan.getServerPort()
+ jalur + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transisi//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<kepala>
<meta content="width=device-width, skala awal=1.0, skala maksimum=1.0, skalabel pengguna=tidak" name="viewport">
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8">
<skrip type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<title>购物车</title>
<gaya tipe="teks/css">
tubuh{
latar belakang: #fefbe6;
perataan teks: tengah;
margin: 0;
bantalan: 0;
warna: #500f60;
}
li{
tipe gaya daftar: tidak ada;
}
a:tautan{
tipe gaya daftar: tidak ada;
}
gambar{
lebar: 100%;
tinggi: 120 piksel;
}
#statis{
margin: 0 otomatis;
perataan teks: kiri;
}
#utama{
lebar: 100%;
margin: 0 otomatis;
warna: #530a4a;
posisi: mutlak;
atas:110 piksel;
}
#jalan utama{
}
#utama ul li{
lebar: 20%;
mengapung: kiri;
}
#main_t{
posisi: mutlak;
atas:140 piksel;
warna: #530a4a;
lebar: 100%;
margin: 0;
bantalan: 0;
ukuran font: 0,8em;
}
#main_t_l,#main_t_a{
warna: #3f1262;
lebar: 100%;
ukuran font: 0,8em;
}
#main_t_l ul li{
lebar: 20%;
mengapung: kiri;
}
#zon{
latar belakang: #dbfff1;
warna: #f8cd66;
}
.bot_in{
latar belakang: #f1fcc4;
batas: 3 piksel #f1fcc4 padat;
radius batas: 6px 6px 6px 6px;
-moz-batas-radius: 6px;
}
#ji{
lebar:130 piksel;
tinggi:30 piksel;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=merah,endcolorstr=biru,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=merah,endcolorstr=biru,gradientType= 0);/*IE8*/
latar belakang:merah;
latar belakang:-moz-linear-gradient(atas, merah, rgba(0, 0, 255, 0.5));
latar belakang:-webkit-gradient(linear, 0 0, 0 bawah, dari(#0dc613), ke(rgba(111, 246, 116, 0.5)));
latar belakang:-o-linear-gradient(atas, merah, rgba(0, 0, 255, 0.5));
warna: #fff;
margin-atas:6%;
perbatasan: tidak ada;
}
.ji {
lebar:130 piksel;
tinggi:30 piksel;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=merah,endcolorstr=biru,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=merah,endcolorstr=biru,gradientType= 0);/*IE8*/
latar belakang:merah;
latar belakang:-moz-linear-gradient(atas, merah, rgba(0, 0, 255, 0.5));
latar belakang:-webkit-gradient(linear, 0 0, 0 bawah, dari(#0dc613), ke(rgba(111, 246, 116, 0.5)));
latar belakang:-o-linear-gradient(atas, merah, rgba(0, 0, 255, 0.5));
warna: #fff;
margin-atas:6%;
perbatasan: tidak ada;
}
</gaya>
<skrip tipe="teks/javascript">
$(fungsi() {
//点击加号购物车数量增加1
$(".add").live("klik",fungsi(){
var isAdd = benar;
var num = parseInt($(ini).closest("li").find("#num").text());
var productId = $(ini).closest("li").find("#productId").val();
var totalharga = parseFloat($("#totalprice").text());
var harga = parseFloat($(ini).closest("ul").find("#price").text());
jika (!isNaN(angka)) {
nomor++;
jika (angka > 99) {
angka = 99;
isTambahkan = salah;
}
jika(adalahTambahkan) {
total harga = total harga + harga;
}
}
var total = jumlah * harga;
$(ini).terdekat("li").find("#num").text(num);
$(ini).terdekat("ul").find("#total").teks(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.sukses==benar){
$("#hargatotal").teks(harga total);
}
});
});
//点击加号购物车数量减少1
$(".hapus").live("klik",fungsi(){
var isReduce = benar;
var num = parseInt($(ini).closest("li").find("#num").text());
var productId = $(ini).closest("li").find("#productId").val();
var totalharga = parseFloat($("#totalprice").text());
var harga = parseFloat($(ini).closest("ul").find("#price").text());
jika (!isNaN(angka)) {
nomor--;
jika (angka < 1) {
angka = 1;
isReduce = salah;
}
jika(dikurangi){
totalharga = totalharga - harga;
}
}
var total = jumlah * harga;
$(ini).terdekat("li").find("#num").text(num);
$(ini).terdekat("ul").find("#total").teks(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.sukses==benar){
$("#hargatotal").teks(harga total);
}
});
});
$("#cha").live("klik",fungsi() {
var productId = $(ini).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){
if(data.sukses==benar){
getShopCartInfo();
}
});
});
fungsi getShopCartInfo(){
$.ajax({
ketik : "POSTING",
url : "<%=basePath%>findShopCart.aksi",
sukses : fungsi(data) {
var baris = "";
var daftar = data.daftar;
$("#main_t_l").kosong();
var jumlah = 0;
if(daftar!=null&&daftar.panjang!=0){
for(var i=0;i<daftar.panjang;i++){
total = total + daftar[i].harga * daftar[i].angka;
baris = "<ul>"+
"<li style=/"lebar: 17%;perataan teks: tengah;/">"+daftar[i].namaproduk+"</li>"+
"<li style=/"lebar: 17%;perataan teks: tengah;/" id=/"price/">"+list[i].price+"￥</li>"+
"<li style=/"lebar: 30%;perataan teks: tengah;/">"+
"<tipe masukan=/"tersembunyi/" id=/"productId/" value="+list[i].id+">"+
"<button style=/"latar belakang: #dbddd4;border-top: tidak ada;border: 1px #dbddd4 solid; radius-batas: 1px 1px 1px 1px;-moz-radius-batas: 1px;/" id=/"num/">"+list[i].num+"</button>"+
"<button style=/"latar belakang: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; radius-batas: 1px 1px 1px 1px;-moz-radius-batas: 1px; warna: #c19268;/" class=/"hapus/">-</button>"+
"<button style=/"latar belakang: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; radius-batas: 1px 1px 1px 1px;-moz-radius-batas: 1px; warna: #c19268;/" class=/"tambahkan/">+</button>"+
"</li>"+
"<li style=/"width: 18%;text-align: center;/"><span id=/"total/">"+list[i].totalprice+"￥</span></li>" +
"<li style=/"lebar: 18%;perataan teks: tengah;/">"+
"<img src=/"<%=basePath%>gambar/cha.png/" style=/"lebar: 25 piksel; tinggi: 25 piksel/" id=/"cha/">"+
"</li>"+
"</ul>"+
"<ukuran jam=/"3px;/" color=/"#c1c1c1/" style=/"lebar: 100%;/">";
$(baris).appendTo($("#main_t_l"));
$("#totalharga").find("span").text(total);
}
}kalau tidak {
$("#main_t_l").append("<ul><li style=/"width: 100%;text-align: center;/">您的购物车为空,快去购物吧！</li> </ul>");
$("#totalharga").find("span").teks(0);
}
}
});
}
//提交订单
$("#ji").klik(fungsi(){
var nama = $("#nama").val();
var tele = $("#tele").val();
var alamat = $("#alamat").val();
var totalharga = $("#totalprice").find("span").text();
jika(harga total == 0){
alert("购物车为空,不能提交订单!");
kembali;
}
jika(nama==""){
alert("姓名不能为空!");
kembali;
}
jika(tele==""){
alert("电话不能为空!");
kembali;
}
jika(alamat==""){
alert("地址不能为空!");
kembali;
}
$("#ji").attr("dinonaktifkan","dinonaktifkan");
$("#ji").css("latar belakang","#808080");
document.getElementById("bgDiv").style.visibility = "visibilitas";
document.getElementById("myspin").style.visibility = "visibilitas";
$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){
if(data.sukses == benar) {
getShopCartInfo();
alert("提交成功");
}kalau tidak {
alert("提交失败,请重新提交!");
$("#ji").addClass("ji");
$("#ji").attr("dinonaktifkan","");
}
});
});
window.onload = getShopCartInfo();
jendela.onload = fungsi() {
document.getElementById("bgDiv").style.visibility = "tersembunyi";
document.getElementById("myspin").style.visibility = "tersembunyi";
};
});
//验证联系方式
fungsi validTeleNum() {
var telp = /(^[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("联系电话格式不正确,请重新输入!");
dokumen.getElementById("tele").value = "";
}
}
}
</skrip>
</kepala>
<tubuh>
<jsp:include page="../jsp/progress.jsp"></jsp:include>
<div id="statis">
<div style="text-align: kiri;">
<a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png"></a>
<img src="<%=basePath %>pic/top5.jpg">
</div>
<div>
<div id="utama">
<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;">
<ukuran jam = "3 piksel;" color="#c1c1c1" style=" lebar: 100%; margin-atas: 50 piksel;">
<div id="zon"><br>
</div>
<tabel align="tengah">
<tr>
<td>姓名:</td>
<td><input type="teks" id="nama"/></td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" id="tele" onblur="validTeleNum()"/></td>
</tr>
<tr>
<td>地址:</td>
<td><masukan tipe="teks" id="alamat"/></td>
</tr>
</tabel>
<div style="margin-kiri:60%;">
<span style="font-size: 1.2em; color: #f8cd66;">总计</span>
<button style="latar belakang: #f1fcc4; margin-kiri:5px;border: 3px #f1fcc4 solid; border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px; color: #000;" id="harga total"><span></span>￥</button>
<br><br>
</div>
<div style="latar belakang: #f1fcc4 ;" sejajarkan="tengah">
<input type="button" id="ji" value="提交订单"></input><br>
<span style="font-size: 2em; color: #a6ae87; margin-kiri: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</tubuh>
</html>