js实现移动端购物车页面功能

最新推荐文章于 2021-08-05 21:47:27 发布

if时光重来

最新推荐文章于 2021-08-05 21:47:27 发布

阅读量3.5k

点赞数 2

分类专栏： js html css 文章标签： js实现购物车功能

本文链接：https://blog.csdn.net/admin_web/article/details/100590698

版权

js 同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

24 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

shopcart.css


body{
    background: #eee;
}
*{margin:0;padding:0;}
.zdy-spcartli{
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}
.zdy-spcartli:first-child{
    margin-top: 0;
}
.zdy-spcartbox-r{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
}
.zdy-spcartbox-spinfo{
    margin-left: 0.7rem;
    width: 100%;
}

.zdy-spcartbox-r img{
    width: 30%;
    height: 4rem;
    margin-left: 0.7rem;
}
.zdy-spcartbox-spsize{
    font-size: 0.7rem;
    color: #999999;
}
.zdy-spcartbox-spprice{
    margin-top:0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.zdy-spcartbox-spprice span{
    color: #999999;
}
.zdy-spcartbox-spnum{
    display: flex;
    flex-direction: row;
    width: 5rem;
}
.zdy-spcartbox-spnum span{
    display: inline-block;
    width: 33.333%;
    border:1px solid #F4F4F4;
    color:#9F9F9F;
    padding:0.1rem;
    text-align: center;
    font-size: 0.9rem;
}
/*结算*/
.zdy-close{
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
}
.zdy-close > div{
    display: inline-block;
    padding: 0.75rem 0;
}
.zdy-close-l{
    width: 80%;
    font-size: 0.7rem;
}
.zdy-close-r{
    width: 20%;
    background: #0BC265;
    text-align: center;
}
.zdy-close-r a{
    color: #333;
}
.zdy-close-l div input{
    margin-right: 0.3rem;
}

.zdy-nav-title i{
    font-size: 0.85rem;
    color: #FF4C4C;
    margin-right: 0.3rem;
}

spcart.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="shopcart.css" />
    <style>
      
    </style>
</head>
<body>
<div class="zdy-section">
    <ul class="zdy-spcarul">
        <li class="zdy-spcartli">
            <div class="zdy-spcartbox-r">
                <label>
                    <input class="aui-radio check" type="checkbox" name="demo1">
                </label>
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1778404737,1201948262&fm=26&gp=0.jpg" alt="" />
                <div class="zdy-spcartbox-spinfo">
                    <div class="zdy-spcartbox-spname">新西兰皇家红苹果2个约2221</div>
                    <div class="zdy-spcartbox-spsize">规格：2个份</div>
                    <div class="zdy-spcartbox-spprice">
                        <span><span style="color: #FF4C4C;">￥ <span class="unitprice">26.6</span></span>/份</span>
                        <div class="zdy-spcartbox-spnum">
                            <span class="minus">-</span>
                            <span class="num">1</span>
                            <span class="plus">+</span>
                        </div>
                    </div>
                </div>
                <!-- 商品小计 -->
                <div class="box16" style="display: none;">
                    <div>&yen;<span class="subPrice" id="subPrice2">0</span></div>
                </div>
            </div>
        </li>
        <li class="zdy-spcartli">
            <div class="zdy-spcartbox-r">
                <label>
                    <input class="aui-radio check" type="checkbox" name="demo1">
                </label>
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1993536395,3778069522&fm=26&gp=0.jpg" alt="" />
                <div class="zdy-spcartbox-spinfo">
                    <div class="zdy-spcartbox-spname">新西兰皇家红苹果2个约2221</div>
                    <div class="zdy-spcartbox-spsize">规格：2个份</div>
                    <div class="zdy-spcartbox-spprice">
                        <span><span style="color: #FF4C4C;">￥ <span class="unitprice">28.6</span></span>/份</span>
                        <div class="zdy-spcartbox-spnum">
                            <span class="minus">-</span>
                            <span class="num">1</span>
                            <span class="plus">+</span>
                        </div>
                    </div>
                </div>
                <!-- 商品小计 -->
                <div class="box16" style="display: none;">
                    <div>&yen;<span class="subPrice" id="subPrice2">0</span></div>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="zdy-close">
    <div class="zdy-close-l">
        <div style="float: left;margin-left: 0.75rem;">
            <label><input class="aui-radio allSelect" type="checkbox" name="demo1">全选</label>
        </div>
        <div style="float: right;">
            合计： <span style="color: #FF4C4C">&yen;<span class="allPrice1" id="finalPrice">0</span></span>&nbsp;&nbsp;&nbsp;数量<span class="fontColor1">0</span>
        </div>
    </div>
    <div class="zdy-close-r"><a href="#">去结算</a></div>
</div>
<div style="height: 2.9rem;"></div>
<footer class="aui-bar aui-bar-tab" id="footer"></footer>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
    $(function(){
        shopcart()
        // 购物车
        function shopcart(){
            // 数量加
            $(".plus").on("click",function(){
                var num=$(this).prev().html();//获取商品初始数量1
                $(this).prev().html(Number(num)+1);//此时已将数字直接写入标签内，是动作
                var buynum=$(this).prev().html();   //得到+1之后的商品数量，即购买数量
                var price=$(this).parent().prev().children().children().html();//获取商品单价
                console.log(price)
                $(this).parent().parent().parent().next().children().children().html((buynum*Number(price)));
                allPrice();
                checkNum()
            });
            // 数量减
            $(".minus").on("click",function(){
                var num=$(this).next().html(); //获取此时商品数量
                if(num>1){
                    $(this).next().html(Number(num)-1);//此时已将数字直接写入标签内，是动作
                    var buynum=$(this).next().html();   //得到-1之后的商品数量，即购买数量
                    var price=$(this).parent().prev().children().children().html();//获取商品单价
                    $(this).parent().parent().parent().next().children().children().html((buynum*Number(price)).toFixed(2));
                }else{
                    alert("再点就没了");
                }
                allPrice();
                checkNum()
            });
            //全选
            $(".allSelect").click(function(){
                if(this.checked==true){
                    $(".check").prop("checked",true);
                }else{
                    $(".check").prop("checked",false);
                }
                allPrice();
                checkNum()
            });
            //单选
            $(".check").click(function(){
                var check=$(".check").length;
                var checked=$(".check:checked").length;
                if(check==checked){
                    $(".allSelect").prop("checked",true);
                }else{
                    $(".allSelect").prop("checked",false);
                }
                allPrice();
                checkNum()
            });

            function checkNum(){
                var num=0;
                $(".check").each(function(){
                    if(this.checked==true){
                        //获取每个选中商品的数量
                        var b = $(this).parent().next().next().find('.num').html();
                        num+=Number(b);
                    }
                });
                $(".fontColor1").html(num);
            }

            function allPrice(){
                var sum=0;
                $(".check").each(function(){
                    if(this.checked==true){
                        //获取每个商品的小计随后相加
                        var a=$($(this).parent().next().next().next().children().children()[0]).html();
                        if(a == 0){
                            a=$($(this).parent().next().next().find(".unitprice")).html();
                        }
                       sum+=Number(a);
                    }
                });
                // 改变总计数值
                $(".allPrice1").html(sum.toFixed(2));
            }
        }
        
    })
</script>
</html>

最终效果图

在这里插入图片描述

if时光重来

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
js实现移动端购物车页面功能

shopcart.cssbody{ background: #eee;}*{margin:0;padding:0;}.zdy-spcartli{ width: 100%; background: #fff; display: flex; flex-direction: row; justify-content: space-between;...
复制链接

扫一扫

专栏目录