二十三、JS购物车demo

其他 2018-05-30 15:57:26 阅读次数: 1

一、构建基础结构样式

二、添加数量栏行为

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.onload=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].onclick=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].onclick=function(){
                    var val=txt[this.index].value;
                    val++;
                    txt[this.index].value=val;
                    smallprice();
                    allprice();
                };

                //添加选项框点击事件
                btn[i].onclick=function(){
                    allprice();
                };

                //结算事件
                pay.onclick=function(){
                    var put="您一共消费"+all_price.innerHTML+"元";
                    alert(put);
                };

                //添加删除单行事件
                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()
            };

            //添加小计事件
            function smallprice() {
                for(var i=0;i<price.length;i++){
                    small_price[i].innerHTML=txt[i].value*parseInt(price[i].innerHTML)+"￥";
                }
            }

            //添加选项框事件
            all_btn.onclick=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>

猜你喜欢

转载自blog.csdn.net/weixin_40976555/article/details/80432900
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022