一、构建基础结构样式
二、添加数量栏行为
1.按“+”数量栏中数量跟随增加,按“-”数量栏数量跟随减少;
2.当数量栏数量为1时,再按“-”时,数量栏不会再减少;
注意:事件中要使用事件对象索引时要对其进行标记;
//添加数量事件
jian[i].index=i; //标记对象索引
jian[i].onclick=function(){
var val=txt[this.index].value;
val--;
if(val<=0){
val=1;
}
txt[this.index].value=val;
}
jia[i].index=i;
jia[i].onclick=function(){
var val=txt[this.index].value;
val++;
txt[this.index].value=val;
}
三、添加小计事件
小计=数量*单价
//添加小计事件
function smallprice() {
for(var i=0;i<price.length;i++){
small_price[i].innerHTML=txt[i].value*parseInt(price[i].innerHTML)+"¥";
}
}
四、添加选项框事件 全选、多选
1.点击全选时,商品列表中所有选项框被选中
2.点击单个/多个选项框时调用总价事件
//添加选项框事件
all_btn.onclick=function(){
for(var i=0;i<btn.length;i++){
btn[i].checked=true;
}
}
五、添加计算总价事件
总价等于选中小计的总和
//总价事件
function allprice() {
var title=0;
for(var i=0;i<small_price.length;i++){
if(btn[i].checked){
title+=parseInt(small_price[i].innerHTML);
}
}
all_price.innerHTML=title+"¥";
}
六、添加删除单行事件
点击删除时删除当前行,并且重新计算总价
注意:当删除一行时,获取元素的数组索引会自动向前补充,即本来索引为1的值会补位变为索引值为0,若继续删除原索引值为1的行,那么删除的将为原索引值为2的行;这里在每次删除结束后重新进行索引排序,避免补位出现的bug;
//添加删除单行事件
del[i].index=i;
del[i].onclick=function(){
list[this.index].remove();
for(var k=0;k<del.length;k++){
del[k].index=k;
}
allprice();
}
注意:和删除单行一样会出现补位情况,索引删除后要进行自减,令剩下的列表行的索引重新排序; 删除后要重新计算总价;
//添加全部删除事件
all_del.onclick=function(){
for(var i=0;i<btn.length;i++){
if(btn[i].checked){
list[i].remove();
i--;
}
}
allprice()
};
八、添加去结算事件
点击去结算按钮会弹框显示需要付款的价格
//结算事件
pay.onclick=function(){
var put="您一共消费"+all_price.innerHTML+"元";
alert(put);
};
九、完善代码
1.数量每次改变需要改变小计
2.被选中的选项框变化时需改变总价
3.每次删除后需改变总价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车demo</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 930px;
height: auto;
margin: 0 auto;
}
.box_ul{
width: 930px;
height: 30px;
border: 1px solid black;
line-height: 30px;
}
.box_ul>li{
list-style: none;
float: left;
margin: 0 50px;
font-weight: bold;
}
.list_ul{
width: 930px;
height: 100px;
border: 1px solid black;
}
.list_ul>li{
float: left;
list-style: none;
width: 132px;
height: 100px;
line-height: 100px;
text-align: center;
}
.cimg{
width: 90px;
margin-top: 3px;
}
.jian,.jia{
width: 20px;
}
.txt{
width: 40px;
outline: none;
text-align: center;
}
.box_down{
margin: 5px;
}
.box_left{
float: left;
}
.box_right{
float: right;
}
</style>
<script>
window.οnlοad=function(){
//获取数量事件元素
var jian=document.getElementsByClassName("jian");
var jia=document.getElementsByClassName("jia");
var txt=document.getElementsByClassName("txt");
//获取小计元素
var price=document.getElementsByClassName("price");
var small_price=document.getElementsByClassName("small_price");
//获取选项框元素
var btn=document.getElementsByClassName("btn");
var all_btn=document.getElementsByClassName("all_btn")[0];
//获取总价事件元素
var all_price=document.getElementsByClassName("all_price")[0];
//获取删除事件元素
var del=document.getElementsByClassName("del");
var list=document.getElementsByClassName("list");
//获取全部删除元素
var all_del=document.getElementsByClassName("all_del")[0];
//获取结算元素
var pay=document.getElementsByClassName("pay")[0];
for (var i=0;i<jian.length;i++){
//添加数量事件
jian[i].index=i; //标记对象索引
jian[i].οnclick=function(){
var val=txt[this.index].value;
val--;
if(val<=0){
val=1;
}
txt[this.index].value=val;
smallprice();
allprice();
};
jia[i].index=i;
jia[i].οnclick=function(){
var val=txt[this.index].value;
val++;
txt[this.index].value=val;
smallprice();
allprice();
};
//添加选项框点击事件
btn[i].οnclick=function(){
allprice();
};
//结算事件
pay.οnclick=function(){
var put="您一共消费"+all_price.innerHTML+"元";
alert(put);
};
//添加删除单行事件
del[i].index=i;
del[i].οnclick=function(){
list[this.index].remove();
for(var k=0;k<del.length;k++){
del[k].index=k;
}
allprice();
}
}
//添加全部删除事件
all_del.οnclick=function(){
for(var i=0;i<btn.length;i++){
if(btn[i].checked){
list[i].remove();
i--;
}
}
allprice()
};
//添加小计事件
function smallprice() {
for(var i=0;i<price.length;i++){
small_price[i].innerHTML=txt[i].value*parseInt(price[i].innerHTML)+"¥";
}
}
//添加选项框事件
all_btn.οnclick=function(){
for(var i=0;i<btn.length;i++){
btn[i].checked=true;
}
allprice();
};
//总价事件
function allprice() {
var title=0;
for(var i=0;i<small_price.length;i++){
if(btn[i].checked){
title+=parseInt(small_price[i].innerHTML);
}
}
all_price.innerHTML=title+"¥";
}
}
</script>
</head>
<body>
<div class="block">
<div class="box">
<ul class="box_ul">
<li><button class="all_btn">全选</button></li>
<li>图片</li>
<li>名称</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>删除</li>
</ul>
</div>
<div class="list">
<ul class="list_ul">
<li><input class="btn" type="checkbox"></li>
<li><img class="cimg" src="./image/cearm.jpg" alt=""></li>
<li>小米摄像机</li>
<li class="price">1299¥</li>
<li><button class="jian">-</button><input class="txt" type="text" value="1"><button class="jia">+</button></li>
<li class="small_price">1299¥</li>
<li class="del">删除</li>
</ul>
</div>
<div class="list">
<ul class="list_ul">
<li><input class="btn" type="checkbox"></li>
<li><img class="cimg" src="./image/cearm.jpg" alt=""></li>
<li>小米摄像机</li>
<li class="price">1299¥</li>
<li><button class="jian">-</button><input class="txt" type="text" value="1"><button class="jia">+</button></li>
<li class="small_price">1299¥</li>
<li class="del">删除</li>
</ul>
</div>
<div class="list">
<ul class="list_ul">
<li><input class="btn" type="checkbox"></li>
<li><img class="cimg" src="./image/cearm.jpg" alt=""></li>
<li>小米摄像机</li>
<li class="price">1299¥</li>
<li><button class="jian">-</button><input class="txt" type="text" value="1"><button class="jia">+</button></li>
<li class="small_price">1299¥</li>
<li class="del">删除</li>
</ul>
</div>
<div class="list">
<ul class="list_ul">
<li><input class="btn" type="checkbox"></li>
<li><img class="cimg" src="./image/cearm.jpg" alt=""></li>
<li>小米摄像机</li>
<li class="price">1299¥</li>
<li><button class="jian">-</button><input class="txt" type="text" value="1"><button class="jia">+</button></li>
<li class="small_price">1299¥</li>
<li class="del">删除</li>
</ul>
</div>
<div class="list">
<ul class="list_ul">
<li><input class="btn" type="checkbox"></li>
<li><img class="cimg" src="./image/cearm.jpg" alt=""></li>
<li>小米摄像机</li>
<li class="price">1299¥</li>
<li><button class="jian">-</button><input class="txt" type="text" value="1"><button class="jia">+</button></li>
<li class="small_price">1299¥</li>
<li class="del">删除</li>
</ul>
</div>
<div class="box_down">
<div class="box_left"><button class="all_del">全部删除</button></div>
<div class="box_right"> 总价: <span class="all_price">0¥</span> <button class="pay">去结算</button></div>
</div>
</div>
</body>
</html>