您的位置：首页 > Web前端 > JavaScript

JavaScript实现购物车的功能

2018-04-04 16:27 465 查看

基本功能：加入购物车的功能、增加（减少）数量、删除、总计等功能
页面源码：<!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 #09C;
border-collapse:collapse}
table th,table td{
border:2px solid #09C;
padding:5px;

}
th{
background-color:#0CC;}
</style>
<script type="text/javascript">
</script>
<script type="text/javascript">
/*定义事件时,若传入this,它是本次触发事件的对象*/
//调用该函数时传入了this,它就是正在单击的按钮对象,需要声明参数
//来接收此对象.即obj=this=正在点的按钮.
function add_shoppingcart(btn){
//获取btn所在的行。
var tr = btn.parentNode.parentNode;
//获取btn下的所有列
var tds = tr.children;
//获取商品名称
var name = tds[0].innerHTML;
//获取商品价格
var price = parseInt(tds[1].innerHTML);
console.log(name+":"+price);

//创建一个新的行
var ntr = document.createElement("tr");
ntr.innerHTML =
'<td>'+name+'</td>'+
'<td>'+price+'</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>'+price+'</td>'+
'<td align="center"><input type="button" onclick="del(this) "value="x"/></td>';

//将此行添加到购物车列表的tbody下.
var tbody = document.getElementById("goods");
tbody.appendChild(ntr);

//求和
sum();
}
function del(btn){
//获取btn所在的行
var tr = btn.parentNode.parentNode;
tr.remove();

//求和
sum();
}
function increase(btn){
//获取按钮的前一个元素
var td1 = btn.previousElementSibling;
// console.log(td1);
var amount = parseInt(td1.value);
//设置td1的值
td1.value = ++amount;
//获取商品的单价
//获取btn所在的行
var tr = btn.parentNode.parentNode;
//获取商品单价
var price = parseInt(tr.children[1].innerHTML);
// console.log(price);

//获取btn的下一个元素(商品价格)
var td2 = btn.parentNode.nextElementSibling;
//设置商品的总价
td2.innerHTML = amount*price;

sum();
}
function decrease(btn){
//获取按钮的后一个元素
var td1 = btn.nextElementSibling;
// console.log(td1);
var amount = parseInt(td1.value);
//设置td1的值

//当amount<=1时返回
if(amount<=1){
return;
}
td1.value = --amount;
//获取商品的单价
//获取btn所在的行
var tr = btn.parentNode.parentNode;
//获取商品单价
var price = parseInt(tr.children[1].innerHTML);
// console.log(price);

//获取btn的下一个元素(商品价格)
var td2 = btn.parentNode.nextElementSibling;
//设置商品的总价
td2.innerHTML = amount*price;
sum();
}

/*计算合计,该方法在以下四处被调用:
* 加入购物车,删除,增加,减少.(之后)
* 每次计算时无条件获取所有的数据行,并求和,因此没有参数.*/
function sum(){
//获取购物车tbody中的所有行
var tbody = document.getElementById("goods");
var trs = tbody.children;
var total = 0 ;
for(var i = 0 ; i < trs.length ; i++){
//获取每一行的总价
var money = parseInt(trs[i].childre
cdd4
n[3].innerHTML);
total += money;
}
//设置总价
//获取总价所在的td
var sum = document.getElementById("total");
//设置总价
sum.innerHTML = total;
}

</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">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航