复制番号代番号次のように:
<%@ ページ言語="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、initial-scale=1.0、maximum-scale=1.0、user-scalable=no" 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;
}
リ{
リストスタイルタイプ: なし;
}
a:リンク{
リストスタイルタイプ: なし;
}
画像{
幅: 100%;
高さ: 120ピクセル;
}
＃静的{
マージン: 0 自動;
テキスト整列: 左;
}
＃主要{
幅: 100%;
マージン: 0 自動;
色: #530a4a;
位置: 絶対;
上:110ピクセル;
}
#メインウル{
}
#メインウルリ{
幅: 20%;
フロート: 左;
}
#メイン_t{
位置: 絶対;
上:140ピクセル;
色: #530a4a;
幅: 100%;
マージン: 0;
パディング: 0;
フォントサイズ: 0.8em;
}
#main_t_l,#main_t_a{
色: #3f1262;
幅: 100%;
フォントサイズ: 0.8em;
}
#main_t_l ウルリ{
幅: 20%;
フロート: 左;
}
#ゾン{
背景: #dbfff1;
色: #f8cd66;
}
.bot_in{
背景: #f1fcc4;
ボーダー: 3px #f1fcc4 ソリッド;
境界半径: 6px 6px 6px 6px;
-moz-border-radius: 6px;
}
#じ{
幅:130ピクセル;
高さ:30ピクセル;
filter:alpha(opacity=100finishopacity=50style=1startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100finishopacity=50style=1startx=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, 0bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
背景:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
色: #fff;
マージントップ:6%;
境界線: なし。
}
.ji {
幅:130ピクセル;
高さ:30ピクセル;
filter:alpha(opacity=100finishopacity=50style=1startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100finishopacity=50style=1startx=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, 0bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
背景:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
色: #fff;
マージントップ:6%;
境界線: なし。
}
</スタイル>
<script type="text/javascript">
$(関数() {
//点击加号购物车数量增加1
$(".add").live("click",function(){
var isAdd = true;
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());
if (!isNaN(num)) {
数値++;
if (数値 > 99) {
数値 = 99;
isAdd = false;
}
if(isAdd) {
合計価格 = 合計価格 + 価格;
}
}
var total = 数値 * 価格;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.success==true){
$("#totalprice").text(totalprice);
}
});
});
//点击加号购物车数量减少1
$(".delete").live("click",function(){
var isReduce = true;
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());
if (!isNaN(num)) {
番号--;
if (数値 < 1) {
数値 = 1;
isReduce = false;
}
if(isReduce){
totalprice = totalprice - 価格;
}
}
var total = 数値 * 価格;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.success==true){
$("#totalprice").text(totalprice);
}
});
});
$("#cha").live("クリック",function() {
var productId = $(this).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){
if(data.success==true){
getShopCartInfo();
}
});
});
関数 getShopCartInfo(){
$.ajax({
タイプ: "POST"、
URL : "<%=basePath%>findShopCart.action",
成功: 関数(データ) {
var 行 = "";
var 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].製品名+"</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 ソリッド; border-radius: 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; color: #c19268;/" class=/"delete/">-</button>"+
"<button style=/"背景: #f5e3d5;ボーダートップ: なし;ボーダー: 1px #f5e3d5 ソリッド;境界半径: 1px 1px 1px 1px;-moz-border-radius: 1px; color: #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=/"幅: 25px;高さ: 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("スパン").text(0);
}
}
});
}
//提交订单
$("#ji").click(function(){
var name = $("#name").val();
var tele = $("#tele").val();
var address = $("#address").val();
var totalprice = $("#totalprice").find("span").text();
if(合計価格 == 0){
alert("购物车は空，提交订单!");
戻る;
}
if(名前==""){
alert("姓名は空にはできません!");
戻る;
}
if(tele==""){
alert("電话は空になれません!");
戻る;
}
if(アドレス==""){
alert("地址は空になれません!");
戻る;
}
$("#ji").attr("無効","無効");
$("#ji").css("背景","#808080");
document.getElementById("bgDiv").style.visibility = "可視性";
document.getElementById("myspin").style.visibility = "可視性";
$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){
if(data.success == true) {
getShopCartInfo();
alert("提交成功");
}それ以外 {
alert("提交失败,请重新提交!");
$("#ji").addClass("ji");
$("#ji").attr("無効","");
}
});
});
window.onload = getShopCartInfo();
window.onload = function() {
document.getElementById("bgDiv").style.visibility = "hidden";
document.getElementById("myspin").style.visibility = "hidden";
};
});
//テスト证蔔系方式
関数 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("テレ").value = "";
}
}
}
</script>
</head>
<本文>
<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>
<div id="メイン">
<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=" width: 100%; margin-top: 50px;">
<div id="zon"><br>
</div>
<テーブル align="center">
<tr>
<td>姓名:</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>接続方式:</td>
<td><input type="text" id="tele" onblur="validTeleNum()"/></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" id="アドレス"/></td>
</tr>
</テーブル>
<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="totalprice"><span></span>￥</button>
<br><br>
</div>
<div style="背景: #f1fcc4 ;" align="センター">
<input type="button" id="ji" value="提交订单"></input><br>
<span style="font-size: 2em; color: #a6ae87; margin-left: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>