HTML的购物车案例
HTML购物车案例
·
购物车案例
今天我们来分享一下使用HTML语言编写的购物车案例，废话不多说，上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置表格的样式*/
table{
/*设置表格的为绝对布局，且设置为居中对齐*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</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>
<tr>
<td colspan="5"><h1>总价: $<font color="green" id="allPrice">0.0</font></h1></td>
<td><button onclick="delCKRow()">删除所选的商品</button></td>
</tr>
</table>
<script>
//计算当前所有商品的总价
function calcAll() {
//获得页面中所有的行
var rs=document.getElementsByTagName("tr")
var sum=0;
for(let i=1;i<rs.length-1;i++){
//rs[i]就是除了第一行之外的其他的行
var s1= textContent = 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-1;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 (td.textContent>0){
if(rex==="-"){
td.textContent-=1
}
}
if (td.textContent>-1){
if(rex==="+"){
td.textContent=td.textContent*1+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-1;i++){
calc(rs[i])
}
}
</script>
</body>
</html>
效果如下（页面放大200%）：
关于购物车案例就到此为止了，如果有喜欢的话，希望可以给予小编三连（点赞、收藏+关注）
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
12
1- 0
已为社区贡献1条内容
所有评论(0)