购物车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';
			}else{
				col1.innerHTML='';
			}
			row.appendChild(col1);
			
			//创建第2列
			var col2 = document.createElement("div");
			col2.className = "col2";
			col2.innerHTML='
'+g.title+'
'+g.color+'
';
			row.appendChild(col2);
			
			//创建第3列
			var col3 = document.createElement("div");
			col3.className = "col3";
			col3.innerHTML='
'+g.flag+'
￥'+g.price+'
';
			row.appendChild(col3);
			
			//创建第4列
			var col4 = document.createElement("div");
			col4.className = "col4";
			col4.innerHTML='-+';
			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='删除';
			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=0;i--){
			if(goods[i].ischeck){
				goods.splice(i,1);
			}
		}
	}
	//将数据刷新到页面上
	sum();
	paint();
}