JS实现购物车的基本功能
2018-08-09 21:17
260 查看
听说写完购物车的基本功能之后，就能对js的认知更上一层楼，能对js的用法更得心应手！于是耐不住好奇心，用js简单滴实现了购物车的基本功能。
这次的博客分了两个部分，第一部分是1.0版本，就是想到啥写啥，所以整个流程下来，略显得冗余臃肿，后来由老师的指导，对代码进行了进一步的修改也就是得到了后面的2.0版本。
一、实现功能
1.将商品添加至购物车；
2.删除加入购物车的商品；
3.实现总计金额的运算；
4.实现数量上的加减，数量加减的同时金额和总计金额进行对应的运算；
二、基本模型
三、实现思路
1.点击“加入购物车”按钮触发事件，实现对购物车表格追加行列的操作；
2.点击删除触发事件，删除行节点；
3.数量的加减触发事件，对数值、金额进行操作。
四、涉及的知识点
1.获取父节点、兄弟节点、的方法；
2.数值转换的方法
3.插入新行的方法：append方法，或者 insertRow方法；
五、1.0版本具体实现
[code]<!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部分作出思路分析
[code]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();
}
该部分函数实现的是添加至购物车的函数，获取的分别是按钮的爷爷节点（父节点的父节点即当前行）；
利用该行获取第一个子节点即商品名称，和商品名称的兄弟节点即单价以备后用；
增加新的行节点，并把行的格式拼接起来；
追加行节点至购物车的表格中。
[code]function remove(obj) {
var tr = obj.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
total();
}
利用删除按钮的父节点的父节点得到tbody,再删除tbody的子节点。
[code]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();
}
数量加运算
[code]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();
}
数量减运算
[code]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版本 具体实现
[code]<!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版本的代码冗余。
九、动图体验
小菜鸡在语言叙述上可能存在一些问题，不是很理解，欢迎留言，如果你有更好的思路，希望可以一起探讨！
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angular，js实现简单购物车功能
- Js实现淘宝购物车类似功能(DOM综合应用)
- JavaScript实现购物车基本功能
- 原生JS实现购物车结算功能代码+zepto版
- JS实现添加至购物车功能
- angular.js实现购物车功能
- 原生JS实现购物车的添加删除，以及总价计算的功能
- js实现鼠标拖拽功能基本思路
- 利用JS实现基本的图片轮播功能，包括鼠标的经过事件
- 简单3步 js使用cookie实现的购物车功能[原创]
- vue.js实现简单的购物车功能
- 用vue.js实现购物车功能
- 原生JS实现购物车功能
- JS结合bootstrap实现基本的增删改查功能
- 使用Angular.js实现简单的购物车功能
- jQuery UI 实现 仿购物车功能 简洁的js
- COCOS2d_js三消项目基本功能实现
- js实现购物车功能
- bootstrap+vue.js实现简单的购物车功能