您的位置：首页 > 其它

模拟购物车的实现过程（详细讲解）

2017-09-19 08:36 513 查看
我们把购物车的步骤分为了三步

一、加入购物车



二、购物车中物品数量的控制



三、计算金额



下面为实现的代码；（代码也是按照上面的思路写的大家可以看看，看不懂可以参照上面的图片上的步骤）

<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<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;
}
th {
background-color:#eee;
}
</style>
<script type="text/javascript">
//加入购物车
//调用函数时传入this（正在点击的那个按钮）
//声明函数来接受该值，参数名不能用关键字
function add_shoppingcart(btn){
console.log(btn);
//获取此按钮的爷爷tr
var tr = btn.parentNode.parentNode;
console.log("tr");
console.log(tr);
//获取此tr的所有孩子tds
var tds=tr.getElementsByTagName("td");
console.log("tds");
console.log(tds);
//获取第0个孩子的内容（商品名）
var spm=tds[0].innerText;
console.log(spm);
/* var str="";
var ntr =document.createElement("tr");
for (var i = 0; i < 2; i++) {
var sp=tds[i].innerText;
str+="<td>"+sp+"</td>";
console.log(str);
}
ntr.innerHTML=str;
var tbody=document.getElementById("goods");
tbody.appendChild(ntr);  */
//获取第一个孩子的内容（单价）
var dj=tds[1].innerText;
console.log(dj);
//创建一个新的ntr
var ntr =document.createElement("tr");
//给这个新tr设置内容
//ntr.innerHTML="拼td的内容";
//其中商品名和单价拼之前获取的变量
var str='<td>'+spm+'</td>'+
'<td>'+dj+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="decrease(this)"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" onclick="increase(this);"/>'+
'</td>'+
'<td>'+dj+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';
ntr.innerHTML=str;
console.log(ntr);
//获取tbody(id="goods")
var tbody=document.getElementById("goods");
//向tbody下追加新tr
tbody.appendChild(ntr);
sum();
}

/* 删除 */
function del(btn){
//获取按钮的爷爷
var tr=btn.parentNode.parentNode;
//删除这个tr
tr.parentNode.removeChild(tr);
sum();
}
//+操作
function increase(btn){
//获取按钮的父亲的孩子

var sl=btn.parentNode.getElementsByTagName("input")[1];
var a=parseInt(sl.value)+1;
sl.value=a;
//tr
console.log("价格");
var tr=btn.parentNode.parentNode;
var td1=tr.getElementsByTagName("td");
console.log(td1[1].innerText);
console.log(a);
var jg=a*td1[1].innerText;
console.log(jg);
var td3=td1[3].innerText
console.log(td3.innerText);
td1[3].innerText=jg;
sum();
}
function decrease(btn){
var inputs = btn.parentNode.getElementsByTagName("input");
var amout=inputs[1].value;
if(amout==1){
return;
}
amout.value=--amout;
var tr=btn.parentNode.parentNode;
var tds=tr.getElementsByTagName("td");
var price=tds[1].innerHTML;
tds[3].innerHTML=price*amout;
sum();
}

//计算价格

function sum(){
console.log("sum");
var tbody=document.getElementById("goods");
var trs=tbody.getElementsByTagName("tr");
var s=0;
for (var i = 0; i < trs.length; i++) {
var td=trs[i].getElementsByTagName("td")[3];
console.log(td);
s+=parseInt(td.innerHTML);
console.log(s);
}
var sunt=document.getElementById("total");
sunt.innerText=s;
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>

<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!-- <tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td align="center">
<input type="button" value="-"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+"/>
</td>
<td>80</td>
<td align="center"><input type="button" value="x"/></td>
</tr> -->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航