复代码代码如下:
<%@ 페이지 언어="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>
<스타일 유형="텍스트/css">
몸{
배경: #fefbe6;
텍스트 정렬: 중앙;
여백: 0;
패딩: 0;
색상: #500f60;
}
리{
목록 스타일 유형: 없음;
}
a:링크{
목록 스타일 유형: 없음;
}
img{
너비: 100%;
높이: 120px;
}
#공전{
여백: 0 자동;
텍스트 정렬: 왼쪽;
}
#기본{
너비: 100%;
여백: 0 자동;
색상: #530a4a;
위치: 절대;
상단:110px;
}
#메인 ul{
}
#메인 울 리{
너비: 20%;
플로트: 왼쪽;
}
#main_t{
위치: 절대;
상단:140px;
색상: #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;
테두리: 3px #f1fcc4 솔리드;
테두리 반경: 6px 6px 6px 6px;
-moz-국경-반경: 6px;
}
#지{
너비:130px;
높이:30px;
필터:알파(불투명도=100 마감 불투명도=50 스타일=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));
배경:-웹킷-그라디언트(선형, 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%;
테두리: 없음;
}
.ji {
너비:130px;
높이:30px;
필터:알파(불투명도=100 마감 불투명도=50 스타일=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));
배경:-웹킷-그라디언트(선형, 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%;
테두리: 없음;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
$(함수() {
//点击加号购物车数weight增加1
$(".add").live("클릭",function(){
var isAdd = true;
var num = parsInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parsFloat($("#totalprice").text());
var 가격 = parsFloat($(this).closest("ul").find("#price").text());
if (!isNaN(숫자)) {
숫자++;
if (숫자 > 99) {
숫자 = 99;
isAdd = 거짓;
}
if(isAdd) {
총 가격 = 총 가격 + 가격;
}
}
var 총계 = 숫자 * 가격;
$(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);
}
});
});
//点击加号购物车数weight减少1
$(".delete").live("클릭",function(){
var isReduce = true;
var num = parsInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parsFloat($("#totalprice").text());
var 가격 = parsFloat($(this).closest("ul").find("#price").text());
if (!isNaN(숫자)) {
숫자--;
if (숫자 < 1) {
숫자 = 1;
isReduce = 거짓;
}
if(isReduce){
총 가격 = 총 가격 - 가격;
}
}
var 총계 = 숫자 * 가격;
$(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(){
$.아약스({
유형: "POST",
url: "<%=basePath%>findShopCart.action",
성공 : 함수(데이터) {
var 행 = "";
var 목록 = 데이터.목록;
$("#main_t_l").empty();
var 총계 = 0;
if(list!=null&&list.length!=0){
for(var i=0;i<list.length;i++){
총계 = 총계 + 목록[i].가격 * 목록[i].num;
행 = "<ul>"+
"<li style=/"너비: 17%;text-align: center;/">"+목록[i].제품 이름+"</li>"+
"<li style=/"너비: 17%;text-align: center;/" id=/"price/">"+list[i].price+"₩</li>"+
"<li 스타일=/"너비: 30%;텍스트 정렬: 가운데;/">"+
"<input type=/"hidden/" id=/"productId/" value="+list[i].id+">"+
"<버튼 스타일=/"배경: #dbddd4;border-top: 없음;border: 1px #dbddd4 solid; 국경 반경: 1px 1px 1px 1px;-moz-경계 반경: 1px;/" id=/"num/">"+list[i].num+"</button>"+
"<버튼 스타일=/"배경: #f5e3d5;테두리 상단: 없음;테두리: 1px #f5e3d5 솔리드; 국경 반경: 1px 1px 1px 1px;-moz-경계 반경: 1px; 색상: #c19268;/" class=/"delete/">-</button>"+
"<버튼 스타일=/"배경: #f5e3d5;테두리 상단: 없음;테두리: 1px #f5e3d5 솔리드; 국경 반경: 1px 1px 1px 1px;-moz-경계 반경: 1px; 색상: #c19268;/" class=/"add/">+</button>"+
"</li>"+
"<li style=/"너비: 18%;text-align: center;/"><span id=/"total/">"+list[i].totalprice+"엔</span></li>" +
"<li 스타일=/"너비: 18%;텍스트 정렬: 가운데;/">"+
"<img src=/"<%=basePath%>image/cha.png/" style=/"너비: 25px;높이: 25px/" id=/"cha/">"+
"</li>"+
"</ul>"+
"<시간 크기=/"3px;/" 색상=/"#c1c1c1/" 스타일=/"너비: 100%;/">";
$(row).appendTo($("#main_t_l"));
$("#totalprice").find("span").text(total);
}
}또 다른 {
달러 </ul>");
$("#totalprice").find("span").text(0);
}
}
});
}
//提交订单
$("#ji").click(함수(){
var 이름 = $("#name").val();
var 텔레 = $("#tele").val();
var 주소 = $("#address").val();
var totalprice = $("#totalprice").find("span").text();
if(총 가격 == 0){
Alert("공간이 없습니다!");
반품;
}
if(이름==""){
Alert("이름이 불허합니다!");
반품;
}
if(텔레==""){
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 = 함수() {
document.getElementById("bgDiv").style.visibility = "숨김";
document.getElementById("myspin").style.visibility = "숨김";
};
});
//验证联系方式
함수 validTeleNum() {
var 전화 = /(^[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 = "";
}
}
}
</script>
</head>
<본문>
<jsp:include 페이지="../jsp/progress.jsp"></jsp:include>
<div id="정적">
<div 스타일="텍스트 정렬: 왼쪽;">
<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;">
<시간 크기="3px;" color="#c1c1c1" style=" 너비: 100%; 여백 상단: 50px;">
<div id="zon"><br>
</div>
<테이블 정렬="중앙">
<tr>
<td>이름:</td>
<td><input type="text" id="이름"/></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>
</table>
<div style="margin-left:60%;">
<span style="font-size: 1.2em; color: #f8cd66;">표시</span>
<button style="배경: #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 스타일="배경: #f1fcc4 ;" 정렬="가운데">
<input type="button" id="ji" value="提交订单"></input><br>
<span style="font-size: 2em; 색상: #a6ae87; 여백-왼쪽: 93%;">></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>