The realization idea and code of JS shopping Cart

Source: Internet
Author: User
Tags visibility

  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> 
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.