Jquery实现购物车页面

最新推荐文章于 2024-05-21 23:21:19 发布
狼牙yyy_
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量802
点赞数 1
文章标签： jquery 前端 javascript
本文链接：https://blog.csdn.net/qq_44116526/article/details/121176087
版权
Jquery实现购物车页面

使用时要引入Jquery.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="JS/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .title,
        .title-em,
        .title-zm {
            font-size: 20px;
            font-weight: 300;
            color: #611f1f;
            text-align: center;
            float: left;
        }

        .content {
            text-align: center;
            float: left;
            font-size: 20px;
            font-weight: 300;

        }

        .content-input {
            margin-top: 60px;

        }

        .content img {
            width: 130px;
            height: 100px;
            margin: 20px;
            margin-top: -40px;

        }

        .content-cont {
            background-color: aqua;
            float: left;
            height: 95px;
            width: 370px;
            font-size: 16px;
            font-weight: 300;
            margin-top: -35px;
            position: relative;
        }

        .content-pub,
        .content-pubb,
        .content-pubj {
            text-align: center;
            float: left;
            font-size: 20px;
            font-weight: 300;
            background-color: aqua;
            margin-top: 66px;
        }

        .content-sum {
            margin-top: 66px;
            text-align: center;
            font-size: 20px;
            font-weight: 300;
            background-color: aqua;
        }

        .spanAdd {
            width: 26px;
            height: 26px;
            font-size: 20px;

            color: #611f1f;
            text-align: center;
        }

        .inputGw {
            width: 35px;
            height: 25px;
            font-size: 20px;
            font-weight: 300;
            color: #611f1f;
            text-align: center;

        }

        .spanReduce {
            width: 26px;
            height: 26px;
            font-size: 20px;
            color: #611f1f;
            text-align: center;
        }

        .content-sum a {
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row bg-info">
                <div class="col-md-1">
                    <div class="title"><input class="checkAll" type="checkbox"></div>
                </div>
                <div class="col-md-5">
                    <div class="title">商品</div>
                </div>
                <div class="col-md-1">
                    <div class="title">克数</div>
                </div>
                <div class="col-md-1 ">
                    <div class="title">单价</div>
                </div>
                <div class="col-md-2 ">
                    <div class="title"> 数量</div>
                </div>
                <div class="col-md-1 ">
                    <div class="title">小计</div>
                </div>
                <div class="col-md-1 ">
                    <div class="title">操作</div>
                </div>
            </div>


            <div class="row">

                <div class="col-md-6">
                    <div class="content-input"><input class="checkBox" type="checkbox"></div>
                    <div class="content">
                        <img src="img/1.jpg">
                    </div>
                    <div class="content-cont">容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容</div>
                </div>
                <div class="col-md-1">
                    <div class="content-pub">克数</div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubb">￥30</div>
                </div>
                <div class="col-md-2 ">
                    <div class="content-sum">
                        <a href="javascript:;" class="spanReduce">-</a>
                        <input type="text" class="inputGw" value="1">
                        <a href="javascript:;" class="spanAdd">+</a>
                    </div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubj">￥30</div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pub">操作</div>
                </div>
            </div>
            <div class="row">

                <div class="col-md-6">
                    <div class="content-input"><input class="checkBox" type="checkbox"></div>
                    <div class="content">
                        <img src="img/1.jpg">
                    </div>
                    <div class="content-cont">容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容</div>
                </div>
                <div class="col-md-1">
                    <div class="content-pub">克数</div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubb">￥35</div>
                </div>
                <div class="col-md-2 ">
                    <div class="content-sum">
                        <a href="javascript:;" class="spanReduce">-</a>
                        <input type="text" class="inputGw" value="1">
                        <a href="javascript:;" class="spanAdd">+</a>
                    </div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubj">￥35</div>
                </div>
                <div class="col-md-1">
                    <div class="content-pub">操作</div>
                </div>
            </div>
            <div class="row">

                <div class="col-md-6">
                    <div class="content-input"><input class="checkBox" type="checkbox"></div>
                    <div class="content">
                        <img src="img/1.jpg">
                    </div>
                    <div class="content-cont">容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容</div>
                </div>
                <div class="col-md-1">
                    <div class="content-pub">克数</div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubb">￥35</div>
                </div>
                <div class="col-md-2 ">
                    <div class="content-sum">
                        <a href="javascript:;" class="spanReduce">-</a>
                        <input type="text" class="inputGw" value="1">
                        <a href="javascript:;" class="spanAdd">+</a>
                    </div>
                </div>
                <div class="col-md-1 ">
                    <div class="content-pubj">￥35</div>
                </div>
                <div class="col-md-1">
                    <div class="content-pub">操作</div>
                </div>
            </div>

            <div class="row bg-info">
                <div class="col-md-1">
                    <div class="title"><input class="checkAll" type="checkbox">全选</div>
                </div>

                <div class="col-md-2 col-md-offset-7 ">
                    <div class="title-em"> 总共<em>3</em>件商品</div>
                </div>
                <div class="col-md-1 ">
                    <div class="title-zm">总计</div>
                </div>
                <div class="col-md-1" style="background-color:red;">
                    <div class="title">结算</div>
                </div>
            </div>

        </div>


    </div>


    </div>
    </div>
</body>
<script>
    $(function () {
        //全选全不选
        $(".checkAll").change(function () {
            //console.log($(this).prop("checked"));
            $(".checkBox,.checkAll").prop("checked", $(this).prop("checked"));
            Sum();
        })
        $(".checkBox").change(function () {
            console.log($(".checkBox:checked").length);
            if ($(".checkBox:checked").length == 3) {
                $(".checkAll").prop("checked", true);
            } else {
                $(".checkAll").prop("checked", false);
            }
            // console.log($(this).prop("checked"));
           Sum();
        })
        //计算总计与总额
        function Sum(){
            var money = 0;
            var count=0;
            //计算钱数
            $(".checkBox").each(function (i, ele) {
                if ($(ele).prop("checked") == true) {
                    money+=parseInt($(ele).parent().parent().siblings().children('.content-pubj').text().substr(1));
                count+=parseInt($(ele).parent().parent().siblings().children().children('.inputGw').val());
                }
                
            });
           // console.log(money);
            //console.log(count);
            $(".title-zm").text("￥" + money.toFixed(2));
            $(".title-em em").text(count);
        }
        //加
        $(".spanAdd").click(function () {
            var n = $(this).siblings(".inputGw").val();
            //console.log(n);
            n++;
            $(this).siblings(".inputGw").val(n);
            var p = $(this).parent().parent().siblings().children('.content-pubb').html();
            // console.log(p);
            p = p.substr(1);
            var price = (p * n).toFixed(2);//保留两位小数
            // console.log(p);content-pubj
            $(this).parent().parent().siblings().children('.content-pubj').html("￥" + price);
           
            Sum();
        })
        $(".spanReduce").click(function () {
            var n = $(this).siblings(".inputGw").val();
            if (n == 1) {
                return false;
            }
            n--;
            $(this).siblings(".inputGw").val(n);
            var p = $(this).parent().parent().siblings().children('.content-pubb').html();
            // console.log(p);
            p = p.substr(1);//去掉￥
            var price = (p * n).toFixed(2);//保留两位小数
            // console.log(p);content-pubj
            $(this).parent().parent().siblings().children('.content-pubj').html("￥" + price);
            Sum();
        })
        //用户修改文本框值
        $(".inputGw").change(function () {
            var n = $(this).val();
            var p = $(this).parent().parent().siblings().children('.content-pubb').html();
            p = p.substr(1);
            $(this).parent().parent().siblings().children('.content-pubj').html("￥" + (p * n).toFixed(2));
        })
    })
</script>

</html>
```实现效果如图
![在这里插入图片描述](https://img-blog.csdnimg.cn/3e7de79c4904477fbc221a1b4f7edf60.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDQxMTY1MjY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
狼牙yyy_
关注
1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现购物车页面

Jquery实现购物车页面使用时要引入Jquery.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫