购物车实现功能1

最新推荐文章于 2024-07-14 15:54:59 发布

尅湖的雨

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量462

点赞数

文章标签： javascript html 实例

本文链接：https://blog.csdn.net/bm15533984642/article/details/77163063

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车实现功能</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车功能实现</title>
    <script src="jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="shopping.js"></script>
    <link rel="stylesheet" href="shopping.css">
</head>
<body>
<div class="main">
    <div class="quanxuan">
        <p class="checkbox fl"></p>
        <p class="fl">全选</p>
        <div class="clear"></div>
    </div>
    <div class="all">
        <div class="quanxuan1">
            <p class="checkbox fl"></p>
            <div class="fl">
                <div class="fl">
                    
                    <span class="fl number">1</span>
                    <div class="ddd">
                        <img src="images/reduce.png" class="fl add">
                        <img src="images/add.png" class="fl ad2 reduce">
                    </div>
                    <div class="clear"></div>
                </div>
                <span class="fl sum">300</span>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="quanxuan1">
            <p class="checkbox fl"></p>
            <div class="fl">
                <div class="fl">
                    
                    <span class="fl number">1</span>
                    <div class="ddd">
                        <img src="images/reduce.png" class="fl add">
                        <img src="images/add.png" class="fl ad2 reduce">
                    </div>
                    <div class="clear"></div>
                </div>
                <span class="fl sum">300</span>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="quanxuan1">
            <p class="checkbox fl"></p>
            <div class="fl">
                <div class="fl">
                    
                    <span class="fl number">1</span>
                    <div class="ddd">
                        <img src="images/reduce.png" class="fl add">
                        <img src="images/add.png" class="fl ad2 reduce">
                    </div>
                    <div class="clear"></div>
                </div>
                <span class="fl sum">300</span>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="quanxuan1">
            <p class="checkbox fl"></p>
            <div class="fl">
                <div class="fl">
                   
                    <span class="fl number">1</span>
                    <div class="ddd">
                        <img src="images/reduce.png" class="fl add">
                        <img src="images/add.png" class="fl ad2 reduce">
                    </div>
                    <div class="clear"></div>
                </div>
                <span class="fl sum">300</span>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!--计算总价-->
    <span class="zong">0</span>
</div>

</body>

</html>
</body>
</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.fl {float: left;}

.fr {float: right;}

.clear {clear: both;}

.main {
    width: 1200px;
    margin: 0 auto;
}
.quanxuan,.quanxuan1 {margin-top: 20px;}
.checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #e5e5e5;
}
.checked {
    background: url(images/dui.png) no-repeat;
    background-size: 100%;
}
.reduce{
    padding:2px;
    border:1px solid #cccccc;
}
.add{
    padding:2px;

    border:1px solid #cccccc;
}
.number{
    width: 50px;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    margin-left:30px;
}
.sum{margin-left: 100px;}


.ddd{
    width: 10px;
    height: 30px;
    float: left;
    cursor: pointer;
    text-align: center;
    margin-left: 2px;
}
.ad2 {
    margin-top:4px;
}

$(function() {

    //单选
    $(".quanxuan1 .checkbox").click(function(){
        if ($(this).hasClass("checked")) {
            $(this).removeClass("checked");
            $(".quanxuan").find(".checkbox").removeClass("checked");
            $(this).siblings("div").find(".sum").removeClass("yong");
            var arr1 = [];
            var lastMoney = 0;
            $(".yong").each(function(){
                arr1.push(parseInt($(this).text()))
            })
            for (var i = 0; i < arr1.length; i++) {
                lastMoney+=arr1[i]
            }
            $(".zong").text(lastMoney);
        }else{
            $(this).addClass("checked");
            $(this).siblings("div").find(".sum").addClass("yong");
            var arr1 = [];
            var lastMoney = 0;
            $(".yong").each(function(){
                arr1.push(parseInt($(this).text()))
            })
            for (var i = 0; i < arr1.length; i++) {
                lastMoney+=arr1[i]
            }
            $(".zong").text(lastMoney);
        }
        if($(".quanxuan1 .checked").length==$(".quanxuan1 .checkbox").length){
            $(".quanxuan .checkbox").addClass("checked");
        }
    })
    //全选功能
    $(".quanxuan .checkbox").click(function(){
        if ($(this).hasClass("checked")) {
            $(this).removeClass("checked");
            $(".sum").removeClass("yong");
            $(".quanxuan .checkbox").removeClass("checked");
            $(".quanxuan1 .checkbox").removeClass("checked");
            var arr1 = [];
            var lastMoney = 0;
            $(".yong").each(function(){
                arr1.push(parseInt($(this).text()))
            })
            for (var i = 0; i < arr1.length; i++) {
                lastMoney+=arr1[i]
            }
            $(".zong").text(lastMoney);
        }else{
            $(this).addClass("checked");
            $(".sum").addClass("yong");
            $(".quanxuan .checkbox").addClass("checked");
            $(".quanxuan1 .checkbox").addClass("checked");
            var arr1 = [];
            var lastMoney = 0;
            $(".yong").each(function(){
                arr1.push(parseInt($(this).text()))
            })
            for (var i = 0; i < arr1.length; i++) {
                lastMoney+=arr1[i]
            }
            $(".zong").text(lastMoney);
        }
    })


    //增加数量
    $(".add").click(function() {
        what = $(this);
        var numadd = parseInt(what.parent().prev().text());
        //console.log(numadd)
        var sum1 = parseInt(what.parents("div").siblings(".sum").text());
        var num = parseInt(numadd + 1);
        //console.log(num)

        what.parent().prev().text(num);
        var sumd = sum1 / numadd;
        var sum2 = sumd * num;
        var a = what.parents("div").siblings(".sum").text(sum2);
        var arr1 = [];
        var lastMoney = 0;
        $(".yong").each(function() {
            arr1.push(parseInt($(this).text()))
        })
        for(var i = 0; i < arr1.length; i++) {
            lastMoney += arr1[i]
        }
        $(".zong").text(lastMoney);
    })

    //减少数量
    $(".reduce").click(function() {
        what = $(this);
        var numadd = parseInt(what.parent().prev().text());
        var sum1 = parseInt(what.parents("div").siblings(".sum").text());
        if(what.parent().prev().text() == 1) {
            return false;
        } else {
            var num = parseInt(numadd) - 1;
            what.parent().prev().text(num);
            var sumd = sum1 / numadd;
            var sum2 = sumd * num;
            var a = what.parents("div").siblings(".sum").text(sum2);
            var arr1 = [];
            var lastMoney = 0;
            $(".yong").each(function() {
                arr1.push(parseInt($(this).text()))
            })
            for(var i = 0; i < arr1.length; i++) {
                lastMoney += arr1[i]
            }
            $(".zong").text(lastMoney);

        }
    })
})

尅湖的雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
购物车实现功能1

html>lang="en"> charset="UTF-8"> 购物车实现功能html> charset="UTF-8"> 购物车功能实现 src="jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"> type="text/javascript" src="shop
复制链接

扫一扫