<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><%@ 페이지 언어="java" contentType="text/html; charset=utf-8" <BR>pageEncoding="utf-8"%> <br><% <BR>문자열 경로 = request.getContextPath(); <BR>String basePath = request.getScheme() "://" <BR> request.getServerName() ":" request.getServerPort() <BR> path "/"; <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>텍스트 정렬: 가운데; <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>width: 20%; <br>플로트: 왼쪽; <br>} <br>#main_t{ <br>위치: 절대; <br>상단:140px; <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-국경-반경: 6px; <br>} <br>#ji{ <br>너비:130px; <br>높이:30px; <br>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); <br>-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*/ <br>배경:빨간색; <br>배경:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>배경:-webkit-gradient(선형, 0 0, 0 하단, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <br>배경:-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=100 Finishopacity=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=100 Finishopacity=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>배경:-webkit-gradient(선형, 0 0, 0 하단, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <br>배경:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <br>색상: #fff; <br>마진 최고:6%; <br>경계: 없음; <br>} <br></style> <br><script type="text/javascript"> var num = parsInt($(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 (num > 99) { <br>num = 99; <br>isAdd = false; <br>} <br>if(isAdd) { <br>totalprice = totalprice 가격 <br>} <br>var total = num * 가격; >$(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 = parsFloat($("#totalprice").text()); <br>var 가격 = parsFloat($(this).closest("ul").find("#price").text()); <br>if (!isNaN(num)) { <br>num--; <br>if (숫자 숫자 = 1; <br>isReduce = 거짓; <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 : 함수 (데이터) { <br>var row = ""; <br>var list = data.list <br>$("#main_t_l").empty() <br>var total = 0; (list!=null&&list.length!=0){ <br>for(var i=0;i<list.length;i ){ <BR>total = 총 목록[i].price * 목록[i].num ; <BR>행 = "<ul>" <br>"<li style="width: 17%;text-align: center;">" 목록[i].productname "</li>" <br>"<li style="width: 17%;text-align: center;" id="price">" list[i].price "엔</li>"< li style="width: 30%;text-align: center;">" <br>"<input type="hidden" id="productId" value=" list[i].id ">" <br>"<버튼 스타일="배경: #dbddd4;border-top: 없음;border: 1px #dbddd4 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px;" id="num ">" 목록[i].num "</버튼>" <br>"<버튼 스타일="배경: #f5e3d5;border-top: 없음;border: 1px #f5e3d5 solid; 1px 1px 1px;-moz-border-radius: 1px; 색상: #c19268;" class="delete">-</button>" <br>"<버튼 스타일="배경: #f5e3d5;border-top: 없음;border: 1px #f5e3d5 solid; 국경 반경: 1px 1px 1px 1px;-moz-경계 반경: 1px; 색상: #c19268;" class="추가"> </버튼>" <br>"</li>" <br>"<li style="width: 18%;text-align: center;"><span id="total">" list[i].totalprice "엔</span></li>" <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="너비: 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>