原生js实现京东淘宝购物车的做法

有好久没有写博客了，后面还是发现多写总结，才会有成长的快一些

好了，直接进入主题，话不多说，来看看购物车常用的功能，如图下。

图中的购物车，也是我们PC端常用到的一种，它主要包含了，“商品列表”

商品列中有包括了以下功能：

 无疑就是这些很熟悉的业务了。下面来看看这些功能是怎么实现的。

1. 选中多个商品、
2. 计算商品总价、计算商品数量
3. 商品数量加减操作、
4. 删除商品
5. 提交订单

首先肯定是先把商品加入购物车，调用你自己写的加入购物车的方法以后，购物车有数据了，我们在接着查询出来。

如下：是我的加入购物车的方法与查询购物车，其中的changeNum()是我的失去焦点加入购物车的方法。每个人方法

各有不同，但是都大同小异，我只想思路顺便讲一下实现代码过程。

 

<!--右边导航栏 购物车 -->

<div class="ordershopCat" id="ordershopCat" style="border: 0px solid black;">
	<div style="width: 100%;height: 40px;background-color: #f2bb7e;font-size: 16px;">
		<!-- <div style="float: left;color:#FFF"><input type="checkbox" name="allcheckbox" onclick="allcheckBox()">全选</div> -->
		<div style="text-align:center;"><span style="color: #FFF;text-align:center;">购物车</span></div>
	</div>
	
		<div style="overflow-x:hidden;height: 70%;" id="shopcart_a">
			<table id="listCatShop" border="0" style="background-color: #fdfcf1;width: 100%;">
			
			</table>
		</div>
	
	<div class="tbar-checkout" style="height: 40px;padding: 5px 110px 5px 5px;position: relative;">
		<div class="jtc-number" style="color: #FFF;font: 12px/180% Arial, Verdana, 宋体;">
			共选中<strong class="J-count" style="font-family: verdana;color: #ddc392;" id="strongNum">0</strong>件商品
			<!-- <strong class="J-count" style="font-family: verdana;color: #fff;" id="strongNum" onclick="deleteAllOrder()"> 删除选中的商品</strong> -->
		</div>
		<div class="jtc-sum" style="color: #FFF;font: 12px/180% Arial, Verdana, 宋体;">
			共计：<strong class=