使用JavaScript实现简单的购物车功能
JavaScript购物车
·
使用JavaScript完成购物车功能
可以通过加入购物车按钮实现商品的添加，并且数量的加减、购物车中的删除都会进行商品库存的改变
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<!-- 引入jquery文件 -->
<script src="js/jquery.min.js"></script>
<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>
<script type="text/javascript">
//添加购物车方法 参数btn为点击的按钮对象
function addCar(btn) {
var tr = btn.parentNode.parentNode
var tds = tr.getElementsByTagName("td");
var productName = tds[0].innerText;
var price = tds[1].innerText;
//判断库存是否充足
var stock = tds[3].innerText;
if(stock == 0) {
return;
} else {
tds[3].innerText = parseInt(stock)-1;
}
//判断商品是否已添加
var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");
for(var i=0; i<trs.length; i++) {
var tr = trs[i];
var tds = tr.getElementsByTagName("td");
var name = tds[0].innerText; //商品名
if(name == productName) {
changeNum(1, tds[2].getElementsByTagName("input")[2], "fromCarBtn"); //调用修改个数方法
return;
}
}
//组装一条数据
var html =
'<td>'+productName+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="changeNum(-1, this)"/>'+
'<input type="text" size="3" readonly value="1"/>'+
'<input type="button" value="+" onclick="changeNum(1, this)"/>'+
'</td>'+
'<td class="moneyTd">'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this)"/></td>';
var table = document.getElementById("goods");
var newTr = table.insertRow();
newTr.innerHTML = html;
//计算总金额
totalMoney();
}
//计算总金额
function totalMoney() {
var tds = document.getElementsByClassName("moneyTd");
var money = 0;
for(var i=0; i<tds.length; i++) {
money += parseFloat(tds[i].innerText);
}
document.getElementById("total").innerText = money;
}
//修改商品数据及金额
function changeNum(num, btn, flag) {
var productName = btn.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML;
var table = document.getElementsByTagName("table")[0];
var trs = table.getElementsByTagName("tr");
var input = btn.parentNode.getElementsByTagName("input")[1];
var oldNum = parseInt(input.value) ;
//判断是否从添加购物车方法调用此方法
if (flag != "fromCarBtn") {
//判断库存
for(var i=1; i<trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
var pn = tds[0].innerText;
if(productName == pn) {
var stock = tds[3].innerText;
if (stock == 0 && num == 1 ) {
return;
} else if(oldNum ==1 && num==-1){
return;
}else{
tds[3].innerText = parseInt(stock) - num;
}
break;
}
}
}
if(oldNum == 1 && num == -1) {
return ;
}
var newNum = parseInt(oldNum)+num;
//修改数量
input.value = newNum;
//修改金额
var tds = btn.parentNode.parentNode.getElementsByTagName("td");
var price = tds[1].innerText;
tds[3].innerText = parseFloat(price) * newNum;
//计算总金额
totalMoney();
}
//删除商品
function del(btn) {
if (confirm("是否确认删除")) {
var tr = btn.parentNode.parentNode;
var name = tr.getElementsByTagName('td')[0].innerText
var count = parseInt(tr.getElementsByTagName('td')[2].getElementsByTagName('input')[1].value)
//console.log(count)
var trs = document.getElementsByTagName('table')[0].getElementsByTagName('tr')
for(var i=1;i<trs.length;i++){
if(trs[i].getElementsByTagName('td')[0].innerText == name){
//console.log(parseInt(trs[i].getElementsByTagName('td')[3].innerText))
trs[i].getElementsByTagName('td')[3].innerText = parseInt(trs[i].getElementsByTagName('td')[3].innerText)+count
//break
}
}
var table= tr.parentNode;
table.removeChild(tr);
}
totalMoney();
}
</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>6</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="addCar(this)"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>7</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="addCar(this)"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>8</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="addCar(this)"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>10</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="addCar(this)"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>9</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="addCar(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">0</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)