Original JS simulation Taobao shopping Cart project combat _javascript Skills

This example tells the original JS simulation Taobao shopping Cart implementation code. Share to everyone for your reference. Specifically as follows:

Through JavaScript to achieve similar and Taobao shopping cart effect, including the product of the radio, select all, delete, modify the quantity, price calculation, number calculation, preview and other functions to achieve. Implementation of the effect diagram:

The appropriate code:

Shoppingcart.html

<! DOCTYPE html>  

shoppingcart.js

Window.onload = function () {//low version of IE browser does not support Getelementbyclassname method, consider compatibility, override method.
   if (!document.getelementbyclassname) {document.getelementbyclassname =function (CLS) {var ret = [];
   var clselments = document.getelementsbytagname (' * '); for (var i = 0, len = clselments.length i < len; i++) {//Consider the case where a label has multiple classes, the regular expression would be a bit better if (CLSELMENTS[I].CLA Ssname = = CLS | | | (Clselments[i].classname.indexof (CLS + "") >= 0) | | (Clselments[i].classname.indexof ("" + CLS + "") >= 0) | | 
    (Clselments[i].classname.indexof ("" + CLS) >= 0))
    {Ret.push (clselments[i]);
  } return ret;
 } var carttable = document.getElementById ("carttable"); var tr = carttable.children[1].rows;
 Table tag-specific properties, rows can get all the TR rows for a TABLE element. var checkinput = document.getelementbyclassname (' check ');//Get all of the radio box var checkallinput =
 Document.getelementbyclassname (' Check_all ');//Get all the checkbox var pricetotle = document.getElementById ("Pricetotle");//Total Price var selecttotle = docUment.getelementbyid ("Selecttotle")//Selected commodity var selected = document.getElementById ("selected"); var footer = document.getElementById ("footer");//Bottom label var selectedviewlist = document.getElementById ("



 Selectedviewlist ");//Bottom label var deleteall = document.getElementById (" DeleteAll "); Calculate Total Price and quantity function Gettotle () {var selectnum = 0;//quantity var pricenum = 0;//price var htmlstr = "";
    string concatenation of thumbnails for (var i = 0,len = Tr.length i < len; i++) {if (Tr[i].getelementsbytagname ("input") [0].checked) {
    Tr[i].classname = "on";
    Selectnum + = parseint (tr[i].getelementsbytagname ("input") [1].value);


    Pricenum + + parsefloat (tr[i].cells[4].innerhtml); The stitching string displays the products that have been selected Htmlstr + = ' <div><span clas

   s = "del" index = "' + i + '" > Cancel selection </span></div>;
   } else{tr[i].classname = "";
  } selecttotle.innerhtml = Selectnum; pricetotle.innerhtml = pricenum.tofixed (2);//Two decimal places reserved Selectedviewlist.innerhtml = Htmlstr;
  //Calculate Subtotal price function Getsubtotle (tr) {var tds = Tr.cells;
  var price = parsefloat (tds[2].innerhtml);
  var num = parseint (tr.getelementsbytagname ("input") [1].value);
  var subtotle = parsefloat (Price * num). toFixed (2);
 tds[4].innerhtml = Subtotle; //check box bind to click event for (var i = 0, len = checkinput.length i < len; i++) {Checkinput[i].onclick =function () {//Judge all Select button, change if (This.classname = = "Check_all check") {for (var j = 0; J < Len; J +) {checkinput[j].checked = th
    is.checked; } if (this.checked = False) {for (var k = 0,len2 = Checkallinput.length k < len2; k++) {CHECKALLINP
    ut[k].checked = false;
  } gettotle (); Control Bottom label Display Selected.onclick = function () {if (Footer.classname = = "Footer") {footer.classname = = "Footer
  Show "; 
  else {footer.classname = = "Footer";
   }//Picture thumbnail deselect button function, E for event object Selectedviewlist.onclick = function (e) {//compatible with low version IE/* if (e) {e = e;
  }else{e = window.event; } */var e = e | |
  window.event;
  var el = e.srcelement;
   if (El.classname = = "Del") {var index = el.getattribute ("index");
   var input = tr[index].getelementsbytagname ("input") [0];
   input.checked = false;
  Input.onclick (); }//Implementation add-subtract, delete operation. Also implemented for (var i = 0, Len3 = tr.length i < Len3; i++) {Tr[i].onclick = function (e) {var e = e | | window.e by the event agent method
   Vent
   var el = e.srcelement;
   var clsname = El.classname;
   var input = this.getelementsbytagname ("input") [1];
   var inputvalue = parseint (Input.value);
   var reduce = This.getelementsbytagname ("span") [1];
     Switch (clsname) {case "add":/*parseint (inputvalue) ++;*/input.value = Inputvalue + 1;
     reduce.innerhtml = "-";
     Getsubtotle (this);
    Break
     Case "reduce": if (inputvalue >= 1) {input.value = inputValue-1;
     }else{reduce.innerhtml = "";     
     } getsubtotle (this);
    Break Case "Delete": VAR conf = confirm ("OK to delete this product?")
     ");
     if (conf) {this.parentNode.removeChild (this);
    } break;
   Default:break;
  } gettotle ();
   //process from manually entering the quantity of merchandise tr[i].getelementsbytagname ("input") [1].onkeyup = function () {var val = this.value;
   var tr = This.parentNode.parentNode;
   if (isNaN (val) | | | val < 0) {val = 1;
   } this.value = val;
  Getsubtotle (TR); Select Delete Deleteall.onclick = function () {if (selecttotle.innerhtml!= "0") {var conf = confirm (OK to delete these items?)
   "); if (conf) {for (var i = 0, len = tr.length i < len; i++) {var input = tr[i].getelementsbytagname ("input") [0
     ];
     if (input.checked) {tr[i].parentnode.removechild (tr[i]);
 }}}}//deselect-Take the event agent---onto the parent element.

Shoppingcart.css

 count_input{width:39px;
 height:15px;
 line-height:15px;
 border:1px solid #aaa;
 Color: #343434;
 Text-align:center;
 PADDING:4PX 0;
Background-color: #fff;
 } span.add, span.reduce{height:23px;
 width:27px;
 border:1px solid #e5e5e5;
 Background: #f0f0f0;
 line-height:23px;
Color: #444;
 }. closing{Display:inline-block;
 width:120px;
 height:50px;
 line-height:50px;
 Background: #f40;
 Text-align:center;
 font-family: ' Microsoft Yahei ';
 font-size:20px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
 -ms-border-radius:2px;
 border-radius:2px;
 Text-decoration:none;
Cursor:pointer; }. fr{float:right. Selected_totle,. SelectAll,. Select_all,. delete_all{margin-top:15px; footer{height:50px
 ;
 Background: #e5e5e5;
font-family: ' Microsoft Yahei ';
 #selectTotle, #priceTotle,. subtotle {color: #f40;
 font-weight:700;
 font-size:18px;
 font-family:tohoma,arial;

padding:5px; }

The above is JS simulation Taobao shopping cart All project code, you are welcome to learn to taste, from which harvest.