<div class="codetitle"> <span><a style="CURSOR: pointer" data="16863" class="copybut" id="copybut16863" onclick="doCopy('code16863')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code16863"> <br><%@ page language="java" contentType="text/html; charset=utf-8" <BR>pageEncoding="utf-8"%> <BR><% <BR>文字列パス = request.getContextPath(); <BR>StringbasePath = request.getScheme() "://" <BR> request.getServerName() ":" request.getServerPort() <BR> パス "/"; <BR>%> <BR><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <BR><html> <BR><頭> <BR><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <br><title>购物车</title> <br><style type="text/css"> <br>ボディ{ <br>背景: #fefbe6; <br>text-align: 中央; <br>マージン: 0; <br>パディング: 0; <br>カラー: #500f60; <br>} <br>li{ <br>リストスタイルタイプ: なし; <br>} <br>a:link{ <br>リストスタイルタイプ: なし; <br>} <br>img{ <br>幅: 100%; <br>高さ: 120px; <br>} <br>#static{ <br>マージン: 0 自動; <br>テキスト整列: 左; <br>} <br>#main{ <br>幅: 100%; <br>マージン: 0 自動; <br>カラー: #530a4a; <br>位置: 絶対。 <br>トップ:110px; <br>} <br>#main ul{ <br>} <br>#main ul li{ <br>幅: 20%; <br>フロート: 左; <br>} <br>#main_t{ <br>位置: 絶対; <br>トップ:140ピクセル; <br>カラー: #530a4a; <br>幅: 100%; <br>マージン: 0; <br>パディング: 0; <br>フォントサイズ: 0.8em; <br>} <br>#main_t_l,#main_t_a{ <br>色: #3f1262; <br>幅: 100%; <br>フォントサイズ: 0.8em; <br>} <br>#main_t_l ul li{ <br>幅: 20%; <br>フロート: 左; <br>} <br>#zon{ <br>背景: #dbfff1; <br>カラー: #f8cd66; <br>} <br>.bot_in{ <br>背景: #f1fcc4; <br>ボーダー: 3px #f1fcc4 ソリッド; <br>境界半径: 6px 6px 6px 6px; <br>-moz-border-radius: 6px; <br>} <br>#ji{ <br>width:130px; <br>高さ:30px; <br>filter:alpha(opacity=100finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType= 0); <br>-ms-filter:alpha(opacity=100finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue) ,gradientType=0);/*IE8*/ <br>背景:赤; <br>背景:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>background:-webkit-gradient(linear, 0 0, 0bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <br>background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>色: #fff; <br>マージントップ:6%; <br>境界線: なし。 <br>} <br>.ji { <br>幅:130px; <br>高さ:30px; <br>filter:alpha(opacity=100finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType= 0); <br>-ms-filter:alpha(opacity=100finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue) ,gradientType=0);/*IE8*/ <br>背景:赤; <br>背景:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>background:-webkit-gradient(linear, 0 0, 0bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <br>background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>色: #fff; <br>マージントップ:6%; <br>境界線: なし。 <br>} <br></style> <br><script type="text/javascript"> <br>$(function() { <br>//点击加号购物车数量增加1 <br>$(".add").live("click",function(){ <br>var isAdd = true ; <br>var num = parseInt($(this).closest("li").find("#num").text()); <br>var productId = $(this).closest("li") ).find("#productId").val(); <br>var totalprice = parseFloat($("#totalprice").text()); <br>var 価格 = parseFloat($(this).closest( "ul").find("#price").text()); <br>if (!isNaN(num)) { <br>num ; <br>if (num > 99) { <br>num = 99; <br>isAdd = false; <br>} <br>if(isAdd) { <br>合計価格 = 合計価格; <br>} <br>変数 = 数値 <br>$(this).closest("li").find("#num").text(num); <br>$(this).closest("ul").find("#total").text (合計); <br>$.post("<%=basePath%>updateShopCart.action","productId=" productId "&num=" num,function(data){ <br>if(data.success= =true){ <br>$("#totalprice").text(totalprice) <br>} <br>}); <br>//点击加号购物车数量减少1 <br>$(".delete").live("click",function(){ <br>var isReduce = true; <br>var num = parseInt($(this).closest("li").find( "#num").text()); <br>var productId = $(this).closest("li").find("#productId").val(); <br>var totalprice = parseFloat($("#totalprice").text()); <br>varprice = parseFloat($(this).closest("ul").find("#price").text()); <br>if (!isNaN(num)) { <br>num--; <br>if (数値 数値 = 1; <br>isReduce = false; <br>} <br>if(isReduce){ <br>totalprice = totalprice - 価格; <br>} <br>}<br>var total = num * 価格; <br>$(this).closest("li").find("#num").text(num); <br>$(this).closest("ul").find("#total").text(total); <br>$.post("<%=basePath%>updateShopCart.action","productId=" productId "&num=" num,function(data){ <br>if(data.success==true){ <br>$("#totalprice").text(totalprice) <br>} <br>}); <br>}); <br>$("#cha").live("click",function() { <br>var productId = $(this).closest("ul").find("#productId").val() ; <br>$.post("<%=basePath%>deleteFromShopCart.action","productId=" productId,function(data){ <br>if(data.success==true){ <br>getShopCartInfo (); <br>} <br>}); <br>function getShopCartInfo(){ <br>$.ajax({ <br>type : "POST", <br>url : "<%=basePath%>findShopCart.action", <br>success : function (データ) { <br>var row = ""; <br>var list = data.list; <br>var total = 0; (list!=null&&list.length!=0){ <br>for(var i=0;i<list.length;i ){ <BR>total = total list[i].price * list[i].num ; <BR>行 = "<ul><BR>"<li style="width: 17%;text-align: center;">" list[i].productname "</li>" <br>"<li style="width: 17%;text-align: center;" id="price">" list[i].price "¥"<br> li style="width: 30%;text-align: center;">" <br>"<input type="hidden" id="productId" value=" list[i].id ">" <br>"<button style="background: #dbddd4;border-top: none;border: 1px #dbddd4 ソリッド; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px;" id="num ">" list[i].num "<br>"<button style="background: #f5e3d5;border-top: none;border: 1px #f5e3d5 border-radius: 1px; 1px 1px 1px;-moz-border-radius: 1px; color: #c19268;" class="削除">-</button>" <br>"<button style="背景: #f5e3d5;ボーダートップ: なし;ボーダー: 1px #f5e3d5 ソリッド;境界半径: 1px 1px 1px 1px;-moz-border-radius: 1px;色: #c19268;" class="追加"> </button>" <br>「</li>」 <br>"<li style="width: 18%;text-align: center;"><span id="total">" list[i].totalprice "¥" <br>"<li style="width: 18%;text-align: center;">" <br>"<img src="<%=basePath%>image/cha.png" style="width: 25px;height: 25px" id="cha">" <br>「</li>」 <br>「</ul>」 <br>"<hr size="3px;" color="#c1c1c1" style="width: 100%;">"; <br>$(row).appendTo($("#main_t_l")); <br>$("#totalprice").find("span").text(total); <br>} <br>}else { <br>$("#main_t_l").append("<ul><li style="width: 100%;text-align: center;">您的购物车は空、快去购物吧!</li></ul>"); <br>$("#totalprice").find("span").text(0); <br>} <br>} <br>}); <br>} <br>//提交订单 <br>$("#ji").click(function(){ <br>var name = $("#name").val(); <br>var tele = $("#tele").val(); <br>var address = $("#address").val(); <br>var totalprice = $("#totalprice").find("span").text(); <br>if(totalprice == 0){ <br>alert("购物车为空,不能提交订单!"); <br>return; <br>} <br>if(name==""){ <br>alert("姓名不能为空!"); <br>return; <br>} <br>if(tele==""){ <br>alert("电话不能为空!"); <br>return; <br>} <br>if(address==""){ <br>alert("地址不能为空!"); <br>return; <br>} <br>$("#ji").attr("disabled","disabled"); <br>$("#ji").css("background","#808080"); <br>document.getElementById("bgDiv").style.visibility = "visibility"; <br>document.getElementById("myspin").style.visibility = "visibility"; <br>$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){ <br>if(data.success == true) { <br>getShopCartInfo(); <br>alert("提交成功"); <br>}else { <br>alert("提交失败,请重新提交!"); <br>$("#ji").addClass("ji"); <br>$("#ji").attr("disabled",""); <br>} <br>}); <br>}); <br>window.onload = getShopCartInfo(); <br>window.onload = function() { <br>document.getElementById("bgDiv").style.visibility = "hidden"; <br>document.getElementById("myspin").style.visibility = "hidden"; <br>}; <br>}); <br>//验证联系方式 <br>function validTeleNum() { <br>var tel = /(^[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}$)/; <br>if (document.getElementById("tele").value != '') { <br>if (!tel.test(document.getElementById("tele").value)) { <br>alert("联系电话格式不正确,请重新输入!"); <br>document.getElementById("tele").value = ""; <br>} <br>} <br>} <br></script> <br></head> <br><body> <br><jsp:include page="../jsp/progress.jsp"></jsp:include> <br><div id="static"> <br><div style="text-align: left;"> <br><a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png" style="width: 15%;height:50px;position: absolute; top:50px;"></a> <br><img src="<%=basePath %>pic/top5.jpg"> <br></div> <br><div> <br><div id="main"> <br><div> <br><ul> <br><li style="width: 17%;text-align: center;">单品</li> <br><li style="width: 17%;text-align: center;">价格</li> <br><li style="width: 30%;text-align: center;">数量</li> <br><li style="width: 18%;text-align: center;">合计</li> <br><li style="width: 18%;text-align: center;">删除</li> <br></ul> <br></div> <br></div> <br><div id="main_t"> <br><div id="main_t_l" style="margin-top: 20px;"> <br></div> <br><div id="main_t_a" style="margin-top: 20px;"> <br><hr size="3px;" color="#c1c1c1" style=" width: 100%; margin-top: 50px;"> <br><div id="zon"><br> <br></div> <br><table align="center"> <br><tr> <br><td>姓名:</td> <br><td><input type="text" class="bot_in" id="name"/></td> <br></tr> <br><tr> <br><td>联系方式:</td> <br><td><input type="text" class="bot_in" id="tele" onblur="validTeleNum()"/></td> <br></tr> <br><tr> <br><td>地址:</td> <br><td><input type="text" class="bot_in" id="address"/></td> <br></tr> <br></table> <br><div style="margin-left:60%;"> <br><span style="font-size: 1.2em; color: #f8cd66;">总计</span> <br><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><br> <br></div> <br><div style="background: #f1fcc4 ;" align="center"> <br><input type="button" id="ji" value="提交订单"></input><br> <br><span style="font-size: 2em; color: #a6ae87; margin-left: 93%;">></span> <br></div> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br> </div>