高级购物车制作
高级购物车顾名思义就是在简易购物车上面加一些功能!
这是简单的购物车,具有简单的加减功能与计算商品的小计与商品的总价
高级购物车
高级购物车具有:将用户点击商品的数量输出到商品的右上角的角标中,并计算用户点击所有商品的价钱输出到预估价格中,同理,将用户点击商品的数量输出到购物车右上角的角标中;点击立即预约,底部导航隐藏,显示一个结算页面,在结算页面中,将用户点击的商品的名称,价格,图片以及数量输出到这个页面中,并且具有可控制商品数量的加减按钮,加减按钮不仅控制结算页面中的商品数量,还控制商品页面中角标中的数量,在结算页面中,给减按钮设置if判断,(!num==0)当该商品数量等于零时,该商品从结算页面中隐藏。
var goods = [{
"id": 1,
"img": "img/jfx.jpg",
"name": "【超级品牌日】GIVENCHY纪梵希散粉四宫格定妆粉细腻粉质控油持妆",
"name_one": "控油定妆粉",
"price": 400,
"num": 0,
"but": '-',
"but_a": '+',
}, {
"id": 2,
"img": "img/lk.jpg",
"name": "兰蔻小黑瓶新面部精华肌底液30/75ml细腻肌肤 修护屏障 淡化细纹",
"name_one": "小黑瓶",
"price": 700,
"num": 0,
"but": '-',
"but_a": '+',
}, {
"id": 3,
"img": "img/ysld.jpg",
"name": "雅诗兰黛面部精华 小棕瓶精华露30/50ml 精华液补水修护稳定透亮",
"name_one": "精华露",
"price": 500,
"num": 0,
"but": '-',
"but_a": '+',
}, {
"id": 4,
"img": "img/giv.jpg",
"name": "【超级品牌日】GIVENCHY纪梵希小羊皮口红半哑光唇膏 307 333正品",
"name_one": "口红",
"price": 300,
"num": 0,
"but": '-',
"but_a": '+',
}];
声明一个数组,设置需要用到的元素,方便调用
var shop = document.getElementsByClassName('ment_child')[0];
for (var i = 0; i < goods.length; i++) {
var div = document.createElement('div');
var p = document.createElement('p');
var img = document.createElement('img');
var span = document.createElement('span');
var spantwo = document.createElement('span');
var corner = document.createElement('span')
spantwo.className = 'spantwo';
div.className = 'shop_div';
span.className = 'shop_span';
corner.className = 'shop_corner';
img.src = goods[i].img;
p.innerText = goods[i].name;
span.innerHTML = goods[i].price;
shop.appendChild(div);
div.appendChild(corner);
div.appendChild(img);
div.appendChild(p);
div.appendChild(span);
div.appendChild(spantwo)[i];
建立需要的标签,通过className设置class名称,将商品的名称,价格,价钱输出到页面上,再将这些标签插入到div中。
(function(i) {
var shop_div = document.getElementsByClassName('shop_div')[i];
var input_one = document.getElementsByClassName('input_one');
shop_div.onclick = function() {
goods[i].num++;
input_one[i].value = goods[i].num;
var num = goods[i].num;
var c = document.getElementsByClassName('div_one')[i];
if(!num == 0){
c.style.display = 'block';
}else if(num == 0){
c.style.display = 'none';
};
document.getElementsByClassName('spantwo')[i].innerHTML = num;
total = document.getElementsByClassName('total')[0].innerHTML - 0;
total++;
document.getElementsByClassName('total')[0].innerHTML = total;
var price = document.getElementsByClassName('total_price_span')[0].innerHTML - 0;
price += goods[i].price;
document.getElementsByClassName('total_price_span')[0].innerHTML = price;
};
}(i))
设置匿名函数,用于传参,给input设置if判断,如果当商品等于0时,该商品隐藏,并将inpu框中的数量等于原始页面中商品的数量。`
var accout = document.getElementsByClassName('account')[0];
var jiaob = document.getElementsByClassName('spantwo');
for (var k = 0; k < goods.length; k++) {
var div_one = document.createElement('div');
var p_one = document.createElement('p');
var img_one = document.createElement('img');
var span_one = document.createElement('span');
var span_two = document.createElement('span');
var but_one = document.createElement('button');
var but_two = document.createElement('button');
var input = document.createElement('input');
div_one.className = 'div_one';
p_one.className = 'p_one';
span_one.className = 'span_one';
span_two.className = 'span_two';
but_one.className = 'but_one';
but_two.className = 'but_two';
input.className = 'input_one';
input.setAttribute("value", "");
img_one.src = goods[k].img;
p_one.innerText = goods[k].name_one;
span_one.innerText = goods[k].price;
but_one.innerHTML = goods[k].but;
but_two.innerHTML = goods[k].but_a;
accout.appendChild(div_one);
div_one.appendChild(p_one);
div_one.appendChild(img_one);
div_one.appendChild(span_one);
div_one.appendChild(span_two);
div_one.appendChild(but_two);
div_one.appendChild(input);
div_one.appendChild(but_one);
将商品输出到结算页面中,通过css调整相对应的样式
(function(o) {
var div_one = document.getElementsByClassName('div_one')[o];
var input_one = document.getElementsByClassName('input_one');
but_two.onclick = function() {
goods[o].num++;
input_one[o].value = goods[o].num;
jiaob[o].innerHTML = goods[o].num;
}
but_one.onclick = function() {
goods[o].num--;
total--;
document.getElementsByClassName('total')[0].innerHTML = total;
var price = document.getElementsByClassName('total_price_span')[0].innerHTML - 0;
price -= goods[o].price;
document.getElementsByClassName('total_price_span')[0].innerHTML = price;
input_one[o].value = goods[o].num;
jiaob[o].innerHTML = goods[o].num;
var c = document.getElementsByClassName('div_one')[o];
if(goods[o].num == 0){
c.style.display = 'none';
};
}
var guan = document.getElementsByClassName('guan')[0];
var accout = document.getElementsByClassName('account');
var last_nav = document.getElementsByClassName('last_nav');
guan.onclick = function(){
accout[0].style.display = 'none';
last_nav[0].style.display = 'block';
}
var last_nav = document.getElementsByClassName('last_nav');
var accout = document.getElementsByClassName('account');
last_nav[0].onclick = function(){
last_nav[0].style.display = 'none';
accout[0].style.display = 'block';
}
}(k));
设置匿名函数,将原始页面中的值传到结算页面中 ,设置给加减按钮设置点击事件,给加按钮设置++,用户每点击一次,商品数量加一,给减按钮设置–,用户每点击一次,商品数量减一,并在这之前进行if判断,当商品数量等于0时,该商品从结算页面中隐藏,给结算页面中的清空设置一个空链接,当点击清空时,页面重新加载,再给关闭设置点击事件,点击时,结算页面隐藏,底部导航显示!
总的来说就是,结算页面中先获取商品,然乎通过css调整样式,最后将原始页面中的数据输出到结算页面中,然后在进行if判断,然后设置显示隐藏!