JS实现购物车的基本功能

清疚 2022-05-17 09:53 345阅读 0赞

听说写完购物车的基本功能之后，就能对js的认知更上一层楼，能对js的用法更得心应手！于是耐不住好奇心，用js简单滴实现了购物车的基本功能。

这次的博客分了两个部分，第一部分是1.0版本，就是想到啥写啥，所以整个流程下来，略显得冗余臃肿，后来由老师的指导，对代码进行了进一步的修改也就是得到了后面的2.0版本。

**一、实现功能**

1.将商品添加至购物车；

2.删除加入购物车的商品；

3.实现总计金额的运算；

4.实现数量上的加减，数量加减的同时金额和总计金额进行对应的运算；

**二、基本模型**

![70][]

**三、实现思路**

1.点击“加入购物车”按钮触发事件，实现对购物车表格追加行列的操作；

2.点击删除触发事件，删除行节点；

3.数量的加减触发事件，对数值、金额进行操作。

**四、涉及的知识点**

1.获取父节点、兄弟节点、的方法；

2.数值转换的方法

3.插入新行的方法：append方法，或者 insertRow方法；

**五、1.0版本具体实现**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style type="text/css">
    	h1{
    		text-align: center;
    	}
    	table{
    		margin: 0 auto;
    		width:60%;
    		border: 2px solid #aaa;
    		border-collapse: collapse;
    	}
    	table th,table td {
    		border: 2px solid #aaa;
    		padding: 5px;
    	}
    </style>
    </head>
    <body>
    
    	<h1>商品：真划算 </h1>
    	<table id="stuff_table">
    		<thead>
    			<tr>
    				<th>商品</th>
    				<th>单价</th>
    				<th>颜色</th>
    				<th>库存</th>
    				<th>好评率</th>
    				<th>操作</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td class="name">罗技M185鼠标</td>
    				<td>80</td>
    				<td>黑色</td>
    				<td>666</td>
    				<td>98%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">罗技M185键盘</td>
    				<td>80</td>
    				<td>白色</td>
    				<td>666</td>
    				<td>96%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">iPhone手机壳</td>
    				<td>60</td>
    				<td>透明</td>
    				<td>6667</td>
    				<td>99.9%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">蓝牙耳机</td>
    				<td>80</td>
    				<td>蓝色</td>
    				<td>666</td>
    				<td>98%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">金士顿U盘</td>
    				<td>80</td>
    				<td>金色</td>
    				<td>466</td>
    				<td>100%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    		</tbody>
    	</table>
    	
    	<h1>购物车</h1>
    	<table>
    		<thead>
    			<tr>
    				<th>商品</th>
    				<th>单价</th>
    				<th>数量</th>
    				<th>金额</th>
    				<th>删除</th>
    			</tr>
    		</thead>
    		<tbody id="shopping_car">
    		</tbody>
    		<tfoot>
    			<tr>
    				<td colspan="3" align="center">总计</td>
    				<td id="total"></td>
    				<td></td>
    			</tr>
    		</tfoot>
    	</table>
    </body>
    <script type="text/javascript">
    function add_shoppingcar(input) {
    	var th_row = input.parentElement.parentElement;
    	var firstname = th_row.firstElementChild;
    	var price = firstname.nextElementSibling;
    	var tr = document.createElement("tr");
    	var shopping_car = document.getElementById("shopping_car");
    	tr.innerHTML="<td>"+firstname.innerHTML+"</td>"+
    				"<td>"+price.innerHTML+"</td>"+
    				"<td align='center'>"+
    					"<input type='button' value='-' onclick='countNumjian(this);' />"+
    					"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
    					"<input type='button' value='+' onclick='countNumjia(this);' />"+
    				"</td>"+
    				"<td>"+price.innerHTML+"</td>"+
    				"<td align='center'>"+
    					"<input type='button' value='X' onclick='remove(this);'/>"+
    				"</td>";
    	shopping_car.append(tr);
    	total();
    }
    
    function remove(obj) {
    	var tr = obj.parentNode.parentNode;
    	var tbody = tr.parentNode;
    	tbody.removeChild(tr);
    	total();
    }
    
    function countNumjia(obj) {
    	var num = document.getElementById("num").value;
    	var price = obj.parentNode.previousSibling;
    	var money = obj.parentNode.nextSibling;
    	num++;
    	document.getElementById("num").value = num;
    	money.innerHTML = price.innerHTML*num;
    	total();
    }
    
    function countNumjian(obj) {
    	var num = document.getElementById("num").value;
    	var price = obj.parentNode.previousSibling;
    	var money = obj.parentNode.nextSibling;
    	if(num>0){
    		num--;
    		document.getElementById("num").value = num;
    		money.innerHTML = price.innerHTML*num;
    	}else{
    		document.getElementById("num").value = 0;
    		money.innerHTML = price.innerHTML*num;
    	}
    	total();
    }
    
    function total() {
    	var tbody = document.getElementById("shopping_car");
    	var trs = tbody.getElementsByTagName("tr");
    	var sum = 0;
    	for(var i=0;i<trs.length;i++){
    		var tds = trs[i].getElementsByTagName("td");
    		var a = tds[3].innerHTML;
    		sum += parseFloat(a);
    	}
    	document.getElementById("total").innerHTML = sum;
    }
    
    </script>
    </html>

**六、1.0版本 JS部分作出思路分析**

function add_shoppingcar(input) {
    	var th_row = input.parentElement.parentElement;
    	var firstname = th_row.firstElementChild;
    	var price = firstname.nextElementSibling;
    	var tr = document.createElement("tr");
    	var shopping_car = document.getElementById("shopping_car");
    	tr.innerHTML="<td>"+firstname.innerHTML+"</td>"+
    				"<td>"+price.innerHTML+"</td>"+
    				"<td align='center'>"+
    					"<input type='button' value='-' onclick='countNumjian(this);' />"+
    					"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
    					"<input type='button' value='+' onclick='countNumjia(this);' />"+
    				"</td>"+
    				"<td>"+price.innerHTML+"</td>"+
    				"<td align='center'>"+
    					"<input type='button' value='X' onclick='remove(this);'/>"+
    				"</td>";
    	shopping_car.append(tr);
    	total();
    }

该部分函数实现的是添加至购物车的函数，获取的分别是按钮的爷爷节点（父节点的父节点即当前行）；

利用该行获取第一个子节点即商品名称，和商品名称的兄弟节点即单价以备后用；

增加新的行节点，并把行的格式拼接起来；

追加行节点至购物车的表格中。

function remove(obj) {
    	var tr = obj.parentNode.parentNode;
    	var tbody = tr.parentNode;
    	tbody.removeChild(tr);
    	total();
    }

利用删除按钮的父节点的父节点得到tbody,再删除tbody的子节点。

function countNumjia(obj) {
    	var num = document.getElementById("num").value;
    	var price = obj.parentNode.previousSibling;
    	var money = obj.parentNode.nextSibling;
    	num++;
    	document.getElementById("num").value = num;
    	money.innerHTML = price.innerHTML*num;
    	total();
    }

数量加运算

数量减运算

function total() {
    	var tbody = document.getElementById("shopping_car");
    	var trs = tbody.getElementsByTagName("tr");
    	var sum = 0;
    	for(var i=0;i<trs.length;i++){
    		var tds = trs[i].getElementsByTagName("td");
    		var a = tds[3].innerHTML;
    		sum += parseFloat(a);
    	}
    	document.getElementById("total").innerHTML = sum;
    }

计算总计金额的方法，获取到购物车的所有中tbody所有元素；

获取所有的行节点；

遍历所有的行，获取每行中的所有列，对每行的第四列“金额”，进行数值加操作。

**八、2.0版本 具体实现**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style type="text/css">
    	h1{
    		text-align: center;
    	}
    	table{
    		margin: 0 auto;
    		width:60%;
    		border: 2px solid #aaa;
    		border-collapse: collapse;
    	}
    	table th,table td {
    		border: 2px solid #aaa;
    		padding: 5px;
    	}
    </style>
    </head>
    <body>
    
    	<h1>商品：真划算 </h1>
    	<table id="stuff_table">
    		<thead>
    			<tr>
    				<th>商品</th>
    				<th>单价</th>
    				<th>颜色</th>
    				<th>库存</th>
    				<th>好评率</th>
    				<th>操作</th>
    			</tr>
    		</thead>
    			<tr>
    				<td class="name">罗技M185鼠标</td>
    				<td>80</td>
    				<td>黑色</td>
    				<td>666</td>
    				<td>98%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">罗技M185键盘</td>
    				<td>80</td>
    				<td>白色</td>
    				<td>666</td>
    				<td>96%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">iPhone手机壳</td>
    				<td>60</td>
    				<td>透明</td>
    				<td>6667</td>
    				<td>99.9%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">蓝牙耳机</td>
    				<td>80</td>
    				<td>蓝色</td>
    				<td>666</td>
    				<td>98%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    			<tr>
    				<td class="name">金士顿U盘</td>
    				<td>80</td>
    				<td>金色</td>
    				<td>466</td>
    				<td>100%</td>
    				<td align="center">
    					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
    				</td>
    			</tr>
    	</table>
    	
    	<h1>购物车</h1>
    	<table>
    		<thead>
    			<tr>
    				<th>商品</th>
    				<th>单价</th>
    				<th>数量</th>
    				<th>金额</th>
    				<th>删除</th>
    			</tr>
    		</thead>
    		<tbody id="goods">
    		</tbody>
    		<tfoot>
    			<tr>
    				<td colspan="3" align="center">总计</td>
    				<td id="total"></td>
    				<td></td>
    			</tr>
    		</tfoot>
    	</table>
    </body>
    <script type="text/javascript">
    function add_shoppingcar(btn) {
    	var tr = btn.parentNode.parentNode;
    	var tds = tr.getElementsByTagName("td");
    	var name = tds[0].innerHTML;
    	var price = tds[1].innerHTML;
    	var tbody = document.getElementById("goods");
    	var row = tbody.insertRow();
    	row.innerHTML = "<td>"+name+"</td>"+
    	"<td>"+price+"</td>"+
    	"<td align='center'>"+
    		"<input type='button' value='-' onclick='change(this,-1);' />"+
    		"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
    		"<input type='button' value='+' onclick='change(this,+1);' />"+
    	"</td>"+
    	"<td>"+price+"</td>"+
    	"<td align='center'>"+
    		"<input type='button' value='X' onclick='del(this);'/>"+
    	"</td>";
    	total();
    }
    
    function del(obj) {
    	var tr = obj.parentNode.parentNode;
    	var tbody = tr.parentNode;
    	tbody.removeChild(tr);
    	total();
    }
    
    function total() {
    	var tbody = document.getElementById("goods");
    	var trs = tbody.getElementsByTagName("tr");
    	var sum = 0;
    	for(var i=0;i<trs.length;i++){
    		var tds = trs[i].getElementsByTagName("td");
    		var m = tds[3].innerHTML;
    		sum += parseFloat(m);
    	}
    	var total = document.getElementById("total");
    	total.innerHTML = sum;
    	
    }
    function change(btn,n) {
    	var inputs = btn.parentNode.getElementsByTagName("input");
    	var amount = parseInt(inputs[1].value);
    	if(amount<=1 && n<0){
    		return;
    	}
    	inputs[1].value = amount+n;
    	amount = inputs[1].value;
    	var tr = btn.parentNode.parentNode;
    	var tds = tr.getElementsByTagName("td");
    	var price = parseFloat(tds[1].innerHTML);
    	var m = amount * price;
    	tds[3].innerHTML = m;
    	total();
    }
    
    </script>
    </html>

两个版本的对比上可以看出1.0的js部分过于臃肿，在2.0版本中，主要改动的是js部分，例如：

1.add\_shoppingcar(btn);函数中，用表格中insertRow()；方法代替了追加方法；

2.数量处理的方法上大有不同。在2.0版本中，change(btn,n);传递了两个参数，加数量时传递的是（this，1）；减数量是传递的是（this，-1）；在数量加减直接进行参数n操作便可实现，大大改善了1.0版本的代码冗余。

**九、动图体验**

![70 1][]

小菜鸡在语言叙述上可能存在一些问题，不是很理解，欢迎留言，如果你有更好的思路，希望可以一起探讨！

[70]: /images/20220517/87626e3796b54279bb52519fb11ca219.png
[70 1]: /images/20220517/6660b19917f24f0498fa16006aead17e.png