标签：
最近在学习js的知识，对于我这种菜鸟而言，JS让我太痛苦了。曾经也不知道听谁说js很简单的，所以就学了，学了才知道。。。都是坑。。。。
现在分享一个我忍着巨大的痛苦写的一个简单购物车，并不是很完善。虽然不是我一个完成的，但是我是努力弄懂弄回才准备分享出去。有问题的部分请谅解，希望可以帮到有需要的朋友。
以下是购物车的简单代码：
(1)html
<body> <div class="shopCar"> <div class="caozuo"> <label for="all">全选</label> <input type="checkbox" id="all"/> <label for="all">排序</label> <input type="text" value=""/> </div> <ul> <li> <input type="checkbox"/> <h3><a href="#">高跟鞋</a></h3> <div> <span class="add">+</span> <input num="" type="text" value="1"/> <span class="minus">-</span> </div> <span>¥：<i>1000</i></span> <div> <a href="javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"/> <h3><a href="#">裙子</a></h3> <div> <span class="add">+</span> <input num="" type="text" value="1"/> <span class="minus">-</span> </div> <span>¥：<i>2900</i></span> <div> <a href="javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"/> <h3><a href="#">可乐</a></h3> <div> <span class="add">+</span> <input num="" type="text" value="1"/> <span class="minus">-</span> </div> <span>¥：<i>1500</i></span> <div> <a href="javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"/> <h3><a href="#">坚果</a></h3> <div> <span class="add">+</span> <input num="" type="text" value="1"/> <span class="minus">-</span> </div> <span>¥：<i>2000</i></span> <div> <a href="javascript:void(0)">删除</a> </div> </li> </ul> <div> <label for="allPrice">¥：</label> <input id="allPrice" type="text" value="0"> </div> </div> </body>
(2)css样式
*{ margin: 0; padding: 0; font-size: 48px; } a{ text-decoration: none; } ul{ list-style: none; } /* shopCar */ .shopCar{ margin-left: 20px; margin-right: 20px; } .caozuo{ height: 100px; border-bottom: 2px #999 solid; } ul{ } li{ height: 100px; background: #f5f5f5; line-height: 100px; border-bottom: 1px red solid; } li > *{ display: inline-block; } h3{ width: 330px; } [num=""]{ width: 100px; } li span{ width: 350px; }
（3）js
<script> function $(x){ return document.querySelector(x); } function $s(x){ return document.querySelectorAll(x); } var Price=0; var btns=$s("li [type=checkbox]"); var btn=$("#all"); var display=$("#allPrice"); var adds=$s(‘.add‘); var minus=$s(‘.minus‘); var shanchu=$s("li div a"); var length=btns.length; // 计算总价 function allPrice(){ Price=0; for(var i=0;i<length;i++){ if(btns[i].checked){ Price += parseInt($s("[num=‘‘]")[i].value) * parseInt($s("li i")[i].innerHTML); } } display.value=Price; } // 全选按钮 btn.onclick=function(){ for(var i=0;i<length;i++){ btns[i].checked=this.checked; } if(this.checked){ allPrice(); }else{ Price = 0; display.value = 0; } } // 添加商品数量和减少商品数量 for(var i=0;i<adds.length;i++){ adds[i].index=i; minus[i].index=i; adds[i].onclick=function(){ var num=$s("[num=‘‘]")[this.index].value; $s("[num=‘‘]")[this.index].value = ++num; btns[this.index].checked=true; allPrice(); panduan(); } minus[i].onclick=function(){ var num=$s("[num=‘‘]")[this.index].value; if(num <=1){ $s("[num=‘‘]")[this.index].value = 1; } else{ $s("[num=‘‘]")[this.index].value= --num; btns[this.index].checked=true; } allPrice(); panduan(); } } for(var i=0;i<length;i++){ btns[i].onclick=function(){ panduan(); } } // 根据商品复选框的条件判断来判断全选框是否全选 function panduan(){ for(var i=0;i<length;i++){ var isTrue=true; if(btns[i].checked==false){ btn.checked=false; } else if(btns[i].checked==true){ for(var i=0;i<length;i++){ if(btns[i].checked==false){ isTrue=false; } } if(!isTrue){ btn.checked=false; } else{ btn.checked=true; } } allPrice(); } } // 删除商品 for(var i=0;i<shanchu.length;i++){ shanchu[i].index=i; shanchu[i].onclick=function(){ $s("li")[this.index].style.display = ‘none‘; $s("li [type=‘checkbox‘]")[this.index].checked = false; allPrice(); } } </script>
标签：
原文地址：http://www.cnblogs.com/zxz-h/p/5800923.html
