- 首页 > it技术 > >
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 = https://www.it610.com/article/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+'
【购物车js页面】￥'+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();
}
推荐阅读
