<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>pageEncoding="utf-8"%> <br>String path = request.getContextPath(); <br>String basePath = request.getScheme() + "://" <br>+ request.getServerName() + ":" + request.getServerPort() <br>+ path + "/"; <br>%> <br> <br> <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>body{ <BR>background: #fefbe6; <BR>text-align: center; <BR>margin: 0; <BR>padding: 0; <BR>color: #500f60; <BR>} <BR>li{ <BR>list-style-type: none; <BR>} <BR>a:link{ <BR>list-style-type: none; <BR>} <BR>img{ <BR>width: 100%; <BR>height: 120px; <BR>} <BR>#static{ <BR>margin: 0 auto; <BR>text-align: left; <BR>} <BR>#main{ <BR>width: 100%; <BR>margin: 0 auto; <BR>color: #530a4a; <BR>position: absolute; <BR>top:110px; <BR>} <BR>#main ul{ <BR>} <BR>#main ul li{ <BR>width: 20%; <BR>float: left; <BR>} <BR>#main_t{ <BR>position: absolute; <BR>top:140px; <BR>color: #530a4a; <BR>width: 100%; <BR>margin: 0; <BR>padding: 0; <BR>font-size: 0.8em; <BR>} <BR>#main_t_l,#main_t_a{ <BR>color: #3f1262; <BR>width: 100%; <BR>font-size: 0.8em; <BR>} <BR>#main_t_l ul li{ <BR>width: 20%; <BR>float: left; <BR>} <BR>#zon{ <BR>background: #dbfff1; <BR>color: #f8cd66; <BR>} <BR>.bot_in{ <BR>background: #f1fcc4; <BR>border: 3px #f1fcc4 solid; <BR>border-radius: 6px 6px 6px 6px; <BR>-moz-border-radius: 6px; <BR>} <BR>#ji{ <BR>width:130px; <BR>height: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>background:red; <BR>background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <BR>background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <BR>background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <BR>color: #fff; <BR>margin-top:6%; <BR>border: none; <BR>} <BR>.ji { <BR>width:130px; <BR>height: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>background:red; <BR>background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <BR>background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); <BR>background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); <BR>color: #fff; <BR>margin-top:6%; <BR>border: none; <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 price = 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 + price; <BR>} <BR>} <BR>var total = num * price; <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>//点击加号购物车数量减少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>var price = parseFloat($(this).closest("ul").find("#price").text()); <BR>if (!isNaN(num)) { <BR>num--; <BR>if (num < 1) { <BR>num = 1; <BR>isReduce = false; <BR>} <BR>if(isReduce){ <BR>totalprice = totalprice - price; <BR>} <BR>} <BR>var total = num * price; <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>}); <BR>function getShopCartInfo(){ <BR>$.ajax({ <BR>type : "POST", <BR>url : "<%=basePath%>findShopCart.action", <BR>success : function(data) { <BR>var row = ""; <BR>var list = data.list; <BR>$("#main_t_l").empty(); <BR>var total = 0; <BR>if(list!=null&&list.length!=0){ <BR>for(var i=0;i<list.length;i++){ <BR>total = total + list[i].price * list[i].num; <BR>row = "<ul>"+ <BR>"<li style=\"width: 17%;text-align: center;\">"+list[i].productname+""+ <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 solid; 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 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px; color: #c19268;\" class=\"delete\">-"+ <BR>"<button style=\"background: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px; color: #c19268;\" class=\"add\">+"+ <BR>""+ <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% alt="js购物车实现思路及代码(个人感觉不错)_javascript技巧" >image/cha.png\" style=\"width: 25px;height: 25px\" id=\"cha\">"+ <BR>""+ <BR>""+ <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;\">您的购物车为空,快去购物吧！"); <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> <br> <br><include page="../jsp/progress.jsp"></include> <br><div id="static"> <br><div style="max-width:90%"> <br><a href="javascript:history.go(-1)"><img src="<%=basePath%20%>pic/fan4.png" style="max-width:90%" alt="js购物车实现思路及代码(个人感觉不错)_javascript技巧" ></a> <br><img src="<%=basePath%20%>pic/top5.jpg" alt="js购物车实现思路及代码(个人感觉不错)_javascript技巧" > <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="提交订单"><br> <br><span style="font-size: 2em; color: #a6ae87; margin-left: 93%;">></span> <br> </div> <br> </div> <br> </div> <br> </div> <br> </div> <br> <br> <br> </div>
