高级购物车讲解

高级购物车制作

高级购物车顾名思义就是在简易购物车上面加一些功能！

这是简单的购物车，具有简单的加减功能与计算商品的小计与商品的总价

高级购物车
高级购物车具有：将用户点击商品的数量输出到商品的右上角的角标中，并计算用户点击所有商品的价钱输出到预估价格中，同理，将用户点击商品的数量输出到购物车右上角的角标中；点击立即预约，底部导航隐藏，显示一个结算页面，在结算页面中，将用户点击的商品的名称，价格，图片以及数量输出到这个页面中，并且具有可控制商品数量的加减按钮，加减按钮不仅控制结算页面中的商品数量，还控制商品页面中角标中的数量，在结算页面中，给减按钮设置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判断，然后设置显示隐藏！