购物车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 οnclick="checkOne('+i+',this.checked);"/>';
			}else{
				col1.innerHTML='<input type="checkbox" οnclick="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" οnclick="minus('+i+')">-</button><input type="text" value="'+g.amount+'" class="txt"/><button type="button" οnclick="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];
	//不能少于1
	if(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();
}