购物车js页面

var goods;//选中商品总数var count =0;//选中商品总额var total =0;//是否已全选var isCheckAll = false;window.onload = function(){//从服务器获取购物车中的数据（模拟） goods= [{"id":"1","title":"联想(Lenovo)YOGA5 PRO 标配版电脑(i5-7200u 8G 512G SSD FHD IPS)银","color":"银色","icon":"../images/cart/product_simg1.png","flag":"达内专享价","price":4688,"amount":1,"money":4688,"stock":12,"ischeck":false},{"id":"2","title":"联想(Lenovo)ThinkPad X240 PRO 标配版电脑(i5-7200u 8G 512G SSD FHD IPS)黑","color":"黑色","icon":"../images/cart/product_simg1.png","flag":"双11特惠价","price":7966,"amount":2,"money":15932,"stock":23,"ischeck":false},{"id":"3","title":"联想(Lenovo)ThinkPad T420 PRO 标配版电脑(i5-7200u 8G 512G SSD FHD IPS)黑","color":"黑色","icon":"../images/cart/product_simg1.png","flag":"双11特惠价","price":8399,"amount":1,"money":8399,"stock":85,"ischeck":false}];//将数据显示到网页上paint();}function paint(){//获取data区域var data = document.getElementById("data");//先清空data区域的数据data.innerHTML = "";//遍历商品数据if(goods){for(var i=0;i<goods.length;i++){var g = goods[i];//创建一行var row = document.createElement("div");row.className = "row";//创建第1列var col1 = document.createElement("div");col1.className = "col1";if(g.ischeck){col1.innerHTML='<input type="checkbox" checked onclick="checkOne('+i+',this.checked);"/>';}else{col1.innerHTML='<input type="checkbox" onclick="checkOne('+i+',this.checked);"/>';}row.appendChild(col1);//创建第2列var col2 = document.createElement("div");col2.className = "col2";col2.innerHTML='<div class="icon"><img src="'+g.icon+'"/></div><div class="desc"><p>'+g.title+'</p><p>'+g.color+'</p></div>';row.appendChild(col2);//创建第3列var col3 = document.createElement("div");col3.className = "col3";col3.innerHTML='<p class="vip">'+g.flag+'</p><p>￥'+g.price+'</p>';row.appendChild(col3);//创建第4列var col4 = document.createElement("div");col4.className = "col4";col4.innerHTML='<button type="button" onclick="minus('+i+')">-</button><input type="text" value="'+g.amount+'" class="txt"/><button type="button" onclick="increase('+i+')">+</button>';row.appendChild(col4);//创建第5列var col5 = document.createElement("div");col5.className = "col5";col5.innerHTML= '￥'+g.money;row.appendChild(col5);//创建第6列var col6 = document.createElement("div");col6.className = "col6";col6.innerHTML='<a href="javascript:remove('+i+');">删除</a>';row.appendChild(col6);//将此行追加到data区域之内data.appendChild(row);}}//绘制合计值var top_check = document.getElementById("top-checked");var top_total = document.getElementById("top-total");var bottom_check = document.getElementById("bottom-checked");var bottom_total = document.getElementById("bottom-total");top_check.innerHTML = count;bottom_check.innerHTML = count;top_total.innerHTML = total+"元";bottom_total.innerHTML = total+"元";//绘制全选的多选框var checkAllTop = document.getElementById("check_all_top");var checkAllBottom = document.getElementById("check_all_bottom");checkAllTop.checked = isCheckAll;checkAllBottom.checked = isCheckAll;}//加法function increase(num){//获取当前操作行对应的数据var g = goods[num];//不能超出库存if(g.amount>=g.stock){return;}//数量累加g.amount++;//计算金额g.money = g.amount*g.price;sum();//将数据刷新到页面上paint();}function minus(num){//获取当前操作行对应的数据var g = goods[num];//不能少于1if(g.amount<=1){return;}//数量累减g.amount--;//计算金额g.money = g.amount*g.price;sum();//将数据刷新到页面上paint();}function remove(num){goods.splice(num,1);//将数据刷新到页面上sum();paint();}//选中一个商品//调用时传入了参数this，它指代当前点击的那个元素。function checkOne(i,ischeck){//设置当前行数据的选中状态goods[i].ischeck = ischeck;//判断是否已全部选中isAllChecked();//统计合计值sum();//绘制页面数据paint();}function isAllChecked(){if(goods){for(var i=0;i<goods.length;i++){if(!goods[i].ischeck){isCheckAll = false;return;}}isCheckAll = true;}}//统计合计值function sum(){count = 0;total = 0;if(goods){for(var i=0;i<goods.length;i++){var g = goods[i];//只统计已选中的数据if(g.ischeck){count += g.amount;total += g.money;}}}}//全选function check_all(ischeck){//设置每行商品数据的选中状态if(goods){for(var i=0;i<goods.length;i++){goods[i].ischeck = ischeck;}}//设置全选的选中状态isCheckAll = ischeck;sum();//重新绘制页面paint();}//删除function del_checked(){if(goods){for(var i=goods.length-1;i>=0;i--){if(goods[i].ischeck){goods.splice(i,1);}}}//将数据刷新到页面上sum();paint();}