Lift Shopping cart presumably only on some shopping sites can see, the following for you to introduce the use of JS shopping cart, interested friends can refer to the following
The code is as follows: <%@ page language= "java" contenttype= "text/html; Charset=utf-8 " pageencoding=" Utf-8 "%> <% string path = Request.getcontextpath (); string BasePath = Request.getscheme () + "://" + request.getservername () + ":" + request.getserverport () + path + "/"; %> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > <html > <head> <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> shopping cart </title> <style type=" Text/css "> body{ background: #fefbe6; text-align:center; margin:0; padding:0; color: #500f60; }&NBSP li{ list-style-type:none; } a:link{ list-style-type:none; } img{ width:100% ; height:120px; } #static { margin:0 auto; text-align:left; } #main { wid th:100%; margin:0 auto; color: #530a4a; position:absolute; top:110px; } #main ul{&n Bsp } #main ul li{ width:20%; float:left; } #main_t { position:absolute; top:140px ; color: #530a4a; width:100%; margin:0; padding:0; font-size:0.8em; } #main_ t_l, #main_t_a { color: #3f1262; width:100%; font-size:0.8em; } #main_t_l ul li{ Widt h:20%; float:left; } #zon { background: #dbfff1; color: #f8cd66; } . bot_in{&nb Sp Background: #f1fcc4; border:3px #f1fcc4 solid; border-radius:6px 6px 6px 6px; -moz-border-radius:6px; } #ji{ width:130px; height:30px; filter:alpha (opacity=100 finishopacity=50 style=1, finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient (Startcolorstr=red,endcolorstr=blue, gradienttype=0); -ms-filter:alpha (opacity=100 finishopacity=50 style=1 Progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/ background:red; background:-moz-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5)); background:- Webkit-gradient (linear, 0 0, 0 bottom, from (#0dc613), to (Rgba (), 246, 116, 0.5)); background:-o-linear-gradient (Top, Red, RGBA (0, 0, 255, 0.5)); color: #fff; margin-top:6%; border:none; . Ji} wi dth:130px; height:30px; Filter:alpha (opacity=100 finishopacity=50 style=1, finishy=150) progid:DXImageTransform.Microsoft.gradient (Startcolorstr=red,endcolorstr=blue,gradienttype=0); -ms-filter:alpha (opacity=100 finishopacity=50 style=1) Progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/ background:red; background:-moz-linear-gradient (Top, Red, RGBA (0, 0, 255, 0.5)); background:- Webkit-gradient (linear, 0 0, 0 bottom, from (#0dc613), to (Rgba (), 246, 116, 0.5)); background:-o-linear-gradient (Top, Red, RGBA (0, 0, 255, 0.5)); color: #fff; margin-top:6%; border:none; } </style> <script type= "Text/javascript" > $ (function () { //Click on the plus number of shopping carts increased 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 price = parsefloat ($ (a). Closest ("ul"). Find ("#price"). Text (); if (!isnan (num)) { num++; if (num >) { num = 99; Isadd = false; } if (isadd) {&NB Sp Totalprice = totalprice + price; } } var total = num * price; $ (this). Closest ("Li"). Find ("#num"). T EXT (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); } }); }); //Click to reduce the number of plus shopping carts 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 price = parsefloat ($ (a). Closest (" ul "). Find (" #price "). Text ()); if (!isnan ( num)) { num--; if (num < 1) { num = 1; isreduce = false; }&NBsp if (isreduce) { totalprice = totalprice-price; } } var total = num * price; $ (this). Closest ( "Li"). Find ("#num"). Text (num); $ (a). 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 (" Click, function () { var productId = $ (this). Closest ("ul"). Find ("#productId"). Val (); $.post ("<%= Basepath%>deletefromshopcart.action "," productid= "+productid,function (data) { if (data.success==true) { Getshopcartinfo (); } }); }); function Getshopcartinfo () { $.ajax ({ type: " POST ", URL:" <%=basepath%>findshopcart.action ", success:function (data) { var row =" "; VA R list = data.list; $ ("#main_t_l"). Empty (); var total = 0; if (list!=null&&list.length!=0) { for (var i=0;i<list.length;i++) { total = Total + List[i].price * list[i].num; row = "<ul>" + "<li style=" width:17%;text-align:center; > "+list[i].productname+" </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= "background: #dbddd4; border-top:none;border:1px #dbddd4 solid; border-radius:1px 1px 1px 1px;-moz-border-radius:1px id= "num" > "+list[i].num+" </button> "+ " < 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 ">-</button>" + "<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 ">+</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= "width:25px;height:25px" id= "Cha" > "+ " </li> "+ " </ul> "+ " <hr size= "3px;" color= "#c1c1c1" style= "width:100%;" > "; $ (row). Appendto ($ (" #main_t_l ")); $ (" #totalprice "). Find (" span "). Text (total); } }else { $ ("#main_t_l"). Append ("<ul><li style=" width:100%;text-align:center; > Your shopping cart is empty, go shopping now! </li></ul> "); $ (" #totalprice "). Find (" span "). Text (0); } } }); } // Submit Order $ ("#ji"). Click (function () { var name = $ ("#name"). Val (); var tele = $ ("#tele"). Val (); var add Ress = $ ("#address"). Val (); var totalprice = $ ("#totalprice"). Find ("span"). TexT (); if (totalprice = 0) { alert ("Cart is empty, cannot submit order!"); return; } if (name== "") { alert ("Name cannot be empty!"); return; } if (tele== "") { alert ("Phone cannot be empty!"); return; } if (address== "") { alert ("Address cannot be empty!"); return; } $ ("#ji"). attr ("Disabled", "disabled"); $ ("#ji"). CSS ("Background", "#808080"); document.getElementById ("Bgdiv"). Style.visibility = "Visibility"; document.getElementById ("Myspin"). style.visibility = "Visibility"; $.post ("<%=basepath%>addshopcart.action", "Name=" +name+ "& Telephone= "+tele+" &address= "+address,function (data) { if (data.success = = True) { getshopcartinfo (); Alert ("submitted successfully"); }else { alert ("Submit failed, please resubmit!"); $ ("#ji"). AddClass ("Ji"); $ ("#ji"). attr ("Disabled", ""); } }); ; = Getshopcartinfo (); window.onload = function () { document.getElementById ("Bgdiv"). style.visibility = "HiDden "; document.getElementById (" Myspin "). Style.visibility =" hidden "; }; }); //Authentication Contact function Validtelenum () { 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}$)/; if (document.getElementById ("Tele"). Value!= ') { if (!tel.test ( document.getElementById ("Tele"). Value) { alert ("The contact phone is not in the correct format, please re-enter!"); document.getElementById ("Tele"). Value = ""; } } } </script> </head>& nbsp <body> <jsp:include page= ". /jsp/progress.jsp "></jsp:include> <div id=" "Static" > <div style= "text-align:left;" > <a href= "Javascript:history.go ( -1)" ><img src= "<%=basepath%>pic/fan4.png" style= "width:15 %;height:50px;position:absolute; top:50px; " ></a> <img src= "<%=basepath%>pic/top5.jpg" > </div> <div> <diV id= "main" > <div> <ul> <li style= "Width:17%;text-align:center;" > Single product </li> <li style= "Width:17%;text-align:center;" > Price </li> <li style= "Width:30%;text-align:center;" > Quantity </li> <li style= "Width:18%;text-align:center;" > Total </li> <li style= "Width:18%;text-align:center;" > Delete </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> <table align= "center" > <tr> <td> name:</td> <td><input type= "text" class= "bot_in" id= "name"/></td> </tr> <tr> <td> Contact:</td> <td><input type= "text" class= "bot_in" id= "Tele" onblur= "Validtelenum ()"/></td> </tr> <tr> <td>:</td> <td><input type= "text" class= "bot_in" id= "Address"/> </td> </tr> </table> <div style= "margin-left:60%;" > <span style= "FONT-SIZE:1.2EM; Color: #f8cd66; > Total </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= "background: #f1fcc4; align=" center "> <input type=" button "Id=" Ji "value=" Submit Order "></input><br> <span style=" FONT-SIZE:2EM; Color: #a6ae87; margin-left:93%; " >></span> </div> </div> </div> </div> </div > </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
