今天给大家分享用JS模拟购物车的案例
废话就不多说了,直接上代码
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="">
<tr>
<td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
<td>名称</td>
<td>单价</td>
<td>个数</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
<td class="sum">19.9</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
<button onclick="delRow(this.parentElement.parentElement)">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
<td class="sum">19.9</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
<button onclick="delRow(this.parentElement.parentElement)">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td></td>
<td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
<td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
<td class="sum">19.9</td>
<td>
<button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
<button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
<button onclick="delRow(this.parentElement.parentElement)">删除</button>
</td>
</tr>
</table>
<h1>总价: $<font color="green" id="allPrice">0.0</font></h1>
<button onclick="delCKRow()">删除所选的商品</button>
//计算当前所有商品的总价
function calcAll() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
var sum=0;
for(let i=1;i<rs.length;i++){
//rs[i]就是除了第一行之外的其他的行
var s1=rs[i].getElementsByClassName("sum")[0].textContent
sum+=parseFloat(s1)
}
//给页面赋值,只要小书店后两位
allPrice.textContent=sum.toFixed(2)
}
//删除选中的行
function delCKRow() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
//将集合collection变成数组array
rs=Array.from(rs)
for(let i=1;i<rs.length;i++){
//拿到行中对应的多选框
var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
//判断多选框是否被选中
if(ck.checked){
//删除该行
rs[i].outerHTML=""
}
}
calcAll()
}
//全选功能
function selectAll(status) {
var is=document.querySelectorAll("input[type='checkbox']")
for (let i of is){
i.checked=status
}
}
//按钮点击删除该行
function delRow(tr) {
tr.outerHTML=""
calcAll()
}
//页面数值变化重新计算价格
function calcRow(rex,tr) {
//rex是运算符号
//tr是当前对应的行
var td=tr.getElementsByClassName("count")[0]
if(rex==="+"){
td.textContent=td.textContent*1+1
}
if(rex==="-"){
td.textContent-=1
}
calc(tr)
}
//写一个函数:算出当前一行中的价格并完成赋值
function calc(tr) {
//value只有在input或者select
//其他的内容全部使用textContent,innerHTML
var price=tr.getElementsByClassName("price")[0].textContent
var count=tr.getElementsByClassName("count")[0].textContent
if(isNaN(price*1)){
tr.getElementsByClassName("price")[0].textContent=0
price=0
}
if(isNaN(count*1)){
tr.getElementsByClassName("count")[0].textContent=0
count=0
}
//使用单价*数量算出总价 并赋值给对应元素
tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
calcAll()
}
//窗口的加载事件 会在整个页面加载完成之后执行
window.onload=()=>{
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
for(let i=1;i<rs.length;i++){
calc(rs[i])
}
}
</script>
</body>
</html>
今天就分享购物车的案例,更多精彩内容下次继续分享