利用js实现购物车相关功能
利用js实现购物车相关功能
·
根据给出购物车页面，用js实现功能部分。
1、实现全选功能。
2、实现四个分项按钮跟随状态的变化并给每一个按钮添加事件，使每个状态发生变化时，判断当前有多少个选中状态的功能。
3、实现已选商品的件数以及合计多少钱的跟踪状态。
4、实现当点击数量中的“+”或“-”按钮时，可控制数量以及小计的变化。
5、实现删除功能。
注：代码中有相关注释，可参考
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>原生JS实现购物车结算功能代码</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" ></script>
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox"/> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
<td class="price">3888.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">3888.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
<td class="price">1428.50</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">1428.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
<td class="price">640.60</td>
<td class="count"><span class="reduce">-</span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">640.60</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="fl delete" id="deleteAll" >删除</a>
<div class="fr closing" >结 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<div><img src="images/1.jpg"><span>取消选择</span></div>
</div>
<span class="arrow">◆<span>◆</span></span> </div>
</div>
</div>
<script>
// 第一步:实现全选功能
//window.onload延时加载
//等待结构加载完成，才加载js
window.onload=function(){
//js实现dom事件编程
//1、事件源 发现页面中存在两个全选按钮
//2、添加事件onchange
var prices=document.getElementsByClassName("price")
var checkAlls=document.getElementsByClassName("check-all")
var checkOnes=document.getElementsByClassName("check-one")
var selectedTotal=document.getElementById("selectedTotal")
var priceTotal=document.getElementById("priceTotal")
var subtotals=document.getElementsByClassName("subtotal")
var countInputs=document.getElementsByClassName("count-input")
function totals(){
var count=0
var total=0
for(var j=0;j<countInputs.length;j++){
//.value获取到内容是字符型
//数值+字符 自动将数值转化为字符 实现拼接
if(checkOnes[j].checked){
count=count+parseInt(countInputs[j].value)
total=total+Number(subtotals[j].innerHTML)
}
}
//当前selectedTotal内容设置count
selectedTotal.innerHTML=count
//js 小数精度问题
//保留两位小数 .toFixed(2)
priceTotal.innerHTML=total.toFixed(2)
}
for(var n=0;n<checkAlls.length;n++){
checkAlls[n].onchange=function(){
//当状态发生改变时，让其得四个分项按钮跟随状态变化
//this==触发事件源得元素
//复选框得选中状态 .checked
//checkOnes 依次拿出数组中的内容，让其状态和this.checked保持一致
for(var j=0;j<checkOnes.length;j++){
checkOnes[j].checked=this.checked
}
//另外得到一个全选跟随变化，找到另外一个全选
for(var j=0;j<checkAlls.length;j++){
checkAlls[j].checked=this.checked
}
totals()
}
}
//给每一个单项按钮添加事件，每一个状态发生变化时，单项按钮，判断当前有多少个选中状态
//如果选择的个数=总个数，那么全选选中，反之取消
for(var n=0;n<checkOnes.length;n++){
checkOnes[n].onchange=function(){
//统计当前单项按钮得选中个数
var sum=0
//依次判断每个单选按钮选中状态，选中sum++
for(var j=0;j<checkOnes.length;j++){
if(checkOnes[j].checked){
sum++
}
}
//sum=单选按钮个数
for(var j=0;j<checkAlls.length;j++){
checkAlls[j].checked= sum==checkOnes.length
}
totals()
}
}
//点击+按钮时，可控制数量以及小计的变化
var adds=document.getElementsByClassName("add")
//依次将每个+号按钮，添加对应的点击事件
for(var n=0;n<adds.length;n++){
adds[n].index=n //依次给每个adds[n],添加
adds[n].onclick=function(){
//点击对应的按钮时，找到其对应的数量，随之发生变化
var index=this.index //当前点击元素的索引值
countInputs[index].value++
//小计变化
var count=countInputs[index].value
var price=prices[index].innerHTML
subtotals[index].innerHTML=(count*price).toFixed(2)
totals()
}
}
var reduces=document.getElementsByClassName("reduce")
for(var n=0;n<reduces.length;n++){
reduces[n].index=n
reduces[n].onclick=function(){
var index=this.index
if(countInputs[index].value==0){
return
}
countInputs[index].value--
var count=countInputs[index].value
var price=prices[index].innerHTML
subtotals[index].innerHTML=(count*price).toFixed(2)
totals()
}
}
var deletes=document.getElementsByClassName("delete")
for(var n=0;n<deletes.length;n++){
deletes[n].onclick=function(){
//通过元素的层级操作
//通过层级关系，发现要删除的元素
var tr=this.parentNode.parentNode
//如何在js中移除对应元素
//1、先找到要被移除的父级
//2、父级.removeChild（移除的元素）
var table=tr.parentNode //找到被移除元素的父级
table.removeChild(tr)
totals()
//需要计算当前选中个数，和所有复选框的个数，判断全选是否选中
for(var n=0;n<checkOnes.length;n++){
checkOnes[n].onclick=function(){
var sum=0
for(var j=0;j<checkOnes.length;j++){
if(checkOnes[j].checked){
sum++
}
}
for(var j=0;j<checkAlls.length;j++){
checkAlls[j].checked= sum==checkOnes.length
totals()
}
}
}
for(var j=0;j<adds.length;j++){
reduces[j].index=j
adds[j].index=j
}
}
}
}
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)