首页 > 代码库 > js写的简单购物车2
js写的简单购物车2
今天周六，总结一下本周所学的知识，因为上次的购物车并没有写完，所以会更新给购物车添加功能。每一次写都会遇到不同的问题。
（1）html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href=http://www.mamicode.com/"index.css"> <script src=http://www.mamicode.com/"data.js"></script></head><body> <div class="shopCar"> <div class="control"> <input type="checkbox" value=http://www.mamicode.com/"" id="all"> <label for="all">全选</label> <input type="button" value=http://www.mamicode.com/"按价格??"> </div> <div class="list"> <h3>商品</h3> <h3>购买数量</h3> <h3>单价</h3> <h3>小计</h3> <h3>操作</h3> </div> <ul> <li> <input type="checkbox"> <h3>摩奥套装</h3> <div class="shuzhi"> <input class="minus" value=http://www.mamicode.com/"-"> <input type="text" num="" value=http://www.mamicode.com/"1"> <input class="add" value=http://www.mamicode.com/"+"> </div> <span>￥：<i>99.00</i></span> <input type="text" class="xiaoji" > <div class="shanchu"> <a href=http://www.mamicode.com/"javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"> <h3>火锅底料</h3> <div class="shuzhi"> <input class="minus" value=http://www.mamicode.com/"-"> <input type="text" num="" value=http://www.mamicode.com/"1"> <input class="add" value=http://www.mamicode.com/"+"> </div> <span>￥：<i>56.00</i></span> <input type="text" class="xiaoji" > <div class="shanchu "> <a href=http://www.mamicode.com/"javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"> <h3>沐浴露</h3> <div class="shuzhi"> <input class="minus" value=http://www.mamicode.com/"-"> <input type="text" num="" value=http://www.mamicode.com/"1"> <input class="add" value=http://www.mamicode.com/"+"> </div> <span>￥：<i>74.50</i></span> <input type="text" class="xiaoji" > <div class="shanchu "> <a href=http://www.mamicode.com/"javascript:void(0)">删除</a> </div> </li> <li> <input type="checkbox"> <h3>坚果</h3> <div class="shuzhi"> <input class="minus" value=http://www.mamicode.com/"-"> <input type="text" num="" value=http://www.mamicode.com/"1"> <input class="add" value=http://www.mamicode.com/"+"> </div> <span>￥：<i>23.00</i></span> <input type="text" class="xiaoji"> <div class="shanchu "> <a href=http://www.mamicode.com/"javascript:void(0)">删除</a> </div> </li> </ul> <div class="last"> <label for="allPrice">总计：</label> <input id="allPrice" type="text" value=http://www.mamicode.com/"0"> </div> </div></body> <script src=http://www.mamicode.com/"index.js"></script></html>
（2）css样式代码
*{ margin:0; padding:0; font-size:20px;}a{ text-decoration: none;}ul{ list-style:none;}.shopCar{ margin-left:100px;}.control{ height:50px; margin-bottom:20px;}.list{ width:900px; height:50px; background:red;}.list>h3{ width:165px; display:inline-block; text-align:center; line-height:50px;}.list h3:nth-child(1){ margin-left:14px;}[type="button"]{ border:none; height:50px; width:250px; border-radius:10px; outline:none; margin-left:50px;}ul li{ width:900px; height:70px; background:snow; line-height:70px; border-bottom:1px red solid;}li >input{ float:left; margin-top:30px;}li h3{ width:165px; float:left; margin-left:20px; text-align:center;}li .shuzhi{ width:165px; height:70px; float:left; text-align:center;}li .shuzhi input:nth-child(1){ width:20px; text-align:center; background:lightgray; border:none;}li .shuzhi input:nth-child(2){ width:40px; text-align:center;}li .shuzhi input:nth-child(3){ width:20px; text-align:center; background:lightgray; border:none;}li >span{ width:166px; text-align:center; float:left;}li .xiaoji { width:165px; float:left; text-align:center; outline:none; border:none;}li .shanchu { width:165px; float:left; text-align:center;}.last{ margin-left:500px; margin-top:10px;}.last input{ width:150px;}
（3）data.js
var data=http://www.mamicode.com/{ item:[{ title:"摩奥套装", price:99.00, delete:"删除" },{ title:"火锅底料", price:56.00, delete:"删除" },{ title:"沐浴露", price:74.50, delete:"删除" },{ title:"坚果", price:23.00, delete:"删除" }]}
(4)index.js
var data =http://www.mamicode.com/ data;var item = data.item;function $(x){ return document.querySelector(x);}function $s(x){ return document.querySelectorAll(x);}var btns=$s("li [type=checkbox]");var btn=$("#all");var display=$("#allPrice");var singlePrice =$s(".xiaoji");var adds=$s(‘.add‘);var minus=$s(‘.minus‘);var shanchu=$s("li div a");var Price = 0;var xuanZhong = true;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) * item[i].price; } } display.value=Price;}function xiaoji(){ for(var i=0;i<item.length;i++){ singlePrice[i].value = parseInt($s("[num=‘‘]")[i].value) * item[i].price; }}for(var i=0;i<item.length;i++){ singlePrice[i].value = parseInt($s("[num=‘‘]")[i].value) * item[i].price;}// 点击全选按钮btn.onclick=function(){ for(var i=0;i<length;i++){ btns[i].checked=this.checked; } if(this.checked){ allPrice(); xiaoji(); } 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 = http://www.mamicode.com/++num; btns[this.index].checked=true; allPrice(); xiaoji(); panduan(); } minus[i].onclick=function(){ var num=$s("[num=‘‘]")[this.index].value; if(num <=1){ $s("[num=‘‘]")[this.index].value = http://www.mamicode.com/1; } else{ $s("[num=‘‘]")[this.index].value = http://www.mamicode.com/--num; btns[this.index].checked=true; } allPrice(); xiaoji(); 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(); xiaoji(); }}// 删除商品for(var i=0;i<length;i++){ shanchu[i].index=i; shanchu[i].onclick=function(){ $s("li")[this.index].style.display="none"; btns[this.index].checked=false; allPrice(); }}// 价格排序var button=$("[type=button]");var ul=$("ul");var html="";var isUp=true;button.onclick=function(){ html=""; if(isUp){ var obj=up(); this.value=http://www.mamicode.com/"按价格??"; for(var i=0;i<obj.length;i++){ html +="<li><input type=‘checkbox‘>"+ "<h3>"+obj[i].title+"</h3>"+ "<div class=‘shuzhi‘>"+ "<input class=‘minus‘ value=http://www.mamicode.com/‘-‘>"+ "<input type=‘text‘ num=‘‘ value=http://www.mamicode.com/‘1‘>"+ "<input class=‘add‘ value=http://www.mamicode.com/‘+‘>
js写的简单购物车2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。