js实现淘宝购物车

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量2.2k 收藏 26
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/99200689
版权

界面功能展示

全选反选单选

在这里插入图片描述

增加、删除，小计，结算在这里插入图片描述

实现功能

1、点击全选、反选、单选按钮相应内容的背景色发生变化，选项发生变化
2、可以点击加减按钮或者手动输入来选择购买的数量，并且设置了购买下限
3、当数量区的内容改变时，小计内容同时变化
4、选中购物商品后，随着商品数量的变化，小计与总计同时变化
5、点击删除按钮，该商品一栏消失，总计发生变化

代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 1000px;
            height: auto;
            margin: auto;
        }

        .top {
            display: flex;
            flex-direction: row;
            /*在父元素上布局!!!*/
            background-color: red;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }

        .list {
            flex: 1;
        }

        .lists {
            flex: 2;
        }

        input[type=checkbox] {
            outline: none;
        }

        .middle {
            display: flex;
            flex-direction: column;
      
        }

        .b-par {
            height: 70px;
            line-height: 70px;
            display: flex;
            flex-direction: row;
            padding: 15px 0;
            border-bottom: dashed 1px darkgray;
            text-align: center;
        }

        .b-par>div:nth-child(2),
        .b-par>div:nth-child(5) {
            flex: 2;
        }

        .b-par>div {
            flex: 1;
        }

        .b-par>div:nth-child(3)>img {
            width: 70px;
        }

        .parsum {
            position: relative;
        }

        .b-par>div:nth-child(5)>input[type=button] {
            width: 25px;
            height: 25px;
            border-style: none;
            background: orange;
            outline: none;
            color: blue;
            font-size: 17px;
            position: absolute;
        }

        .b-par>div:nth-child(5)>input:nth-child(1) {
            top: 22.5px;
            right: 123.6125px;
        }

        .b-par>div:nth-child(5)>input:nth-child(3) {
            top: 22.5px;
            right: 73.6125px;
        }

        .b-par>div:nth-child(5)>input[type=text] {
            width: 25px;
            height: 25px;
            border-style: none;
            outline: none;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .b-par>div:last-child>input[type=button] {
            width: 60px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;

        }

        .book {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: #fff;
            border-bottom: solid 1px darkgray;
        }

        .book>div {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
        }

        .sale {
            background-color: red;
            color: white;
        }

        .bgcolor {
            background: rgb(197, 195, 195, 0.25);
        }
    </style>
</head>

<body>
    <!-- 整体布局 -->
    <div class="block">
        <!-- 上部 -->
        <div class="top">
            <div class="list"><input type="checkbox" name="" id="ckall">全选</div>
            <div class="lists">商品名称</div>
            <div class="list">图片</div>
            <div class="list">单价</div>
            <div class="lists">数量</div>
            <div class="list">小计</div>
            <div class="list">操作</div>
        </div>
        <!-- 商品陈列区 -->
        <div class="middle"></div>
        <!-- 结算区 -->
        <div class="book">
            <div class="fselect"><input type="checkbox" name="" id="ckfan">反选</div>
            <div>总计：<span id="money"></span>$</div>
            <div class="sale">结算</div>
        </div>
    </div>

    <script>
        var cart = [{
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为P30",
                "src": "images/huaweip30.jpg",
                "price": "1499",
                "total": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为P30",
                "src": "images/huaweip30.jpg",
                "price": "1499",
                "total": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为P30",
                "src": "images/huaweip30.jpg",
                "price": "1499",
                "total": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为P30",
                "src": "images/huaweip30.jpg",
                "price": "1499",
                "total": "1499",
                "num": 1
            }
        ]
        var middle = document.getElementsByClassName("middle")[0];
        for (var index in cart) {
            // 行
            var par = document.createElement("div");
            par.className = "b-par";
            middle.appendChild(par);
            // 列
            //多选框
            var parchild = document.createElement("div");
            var ckbox = document.createElement("input");
            ckbox.type = "checkbox";
            ckbox.className = "cklist";
            parchild.appendChild(ckbox);
            par.appendChild(parchild);
            //名称
            var parchildname = document.createElement("div");
            parchildname.innerHTML = cart[index].name;
            par.appendChild(parchildname);
            //图片
            var parimg = document.createElement("div");
            var img = document.createElement("img");
            img.src = cart[index].src;
            parimg.appendChild(img);
            par.appendChild(parimg);
            //价格
            var parprice = document.createElement("div");
            parprice.innerHTML = cart[index].price + "$";
            parprice.className = "price";
            parprice.setAttribute("data-price", cart[index].total);
            par.appendChild(parprice);
            //数量
            var parsum = document.createElement("div");
            parsum.className = "parsum";
            var parbtnl = document.createElement("input");
            parbtnl.type = "button";
            parbtnl.value = "-";
            parbtnl.className = "parbtnl";

            var parsale = document.createElement("input");
            parsale.type = "text";
            parsale.className = "parsale";
            parsale.value = cart[index].num;

            var parbtnr = document.createElement("input");
            parbtnr.type = "button";
            parbtnr.value = "+";
            parbtnr.className = "parbtnr";

            parsum.appendChild(parbtnl);
            parsum.appendChild(parsale);
            parsum.appendChild(parbtnr);
            par.appendChild(parsum);
            //小计
            var partotal = document.createElement("div");
            partotal.innerHTML = cart[index].total + "$";
            partotal.className = "partotal";
            par.appendChild(partotal);
            //操作
            var action = document.createElement("div");
            var btndelete = document.createElement("input");
            btndelete.type = "button";
            btndelete.className = "delete";
            btndelete.value = "删除";
            action.appendChild(btndelete);
            par.appendChild(action);
        }
        window.onload = function () {
            //反选、全选
            var ckall = document.getElementById("ckall");
            var ckfan = document.getElementById("ckfan");
            var cklist = document.getElementsByClassName("cklist");
            var parbtnl = document.getElementsByClassName("parbtnl");
            var parbtnr = document.getElementsByClassName("parbtnr");
            var bpar = document.getElementsByClassName("b-par");
            var parsale = document.getElementsByClassName("parsale");
            var partotal = document.getElementsByClassName("partotal");
            var price = document.getElementsByClassName("price");
            var money = document.getElementById("money");
            var btndelete = document.getElementsByClassName("delete");

            //全选
            ckall.onclick = function () {
                if (this.checked) {
                    if (ckfan.checked == true) {
                        ckfan.checked = !ckfan.checked;
                    }
                    for (var i = 0; i < cklist.length; i++) {
                        cklist[i].checked = true;
                        bpar[i].className = "b-par bgcolor";
                    }
                } else {
                    for (var i = 0; i < cklist.length; i++) {
                        cklist[i].checked = false;
                        bpar[i].className = "b-par";
                    }
                }
                totalprice(partotal, cklist, money);
            }
            //反选
            ckfan.onclick = function () {
                if (ckall.checked == true) {
                    ckall.checked = !ckall.checked;
                }
                for (var i = 0; i < cklist.length; i++) {
                    cklist[i].checked = !cklist[i].checked;
                    if (cklist[i].checked) {
                        bpar[i].className = "b-par bgcolor";
                    } else {
                        bpar[i].className = "b-par";
                    }
                }
                totalprice(partotal, cklist, money);
            }
            //单选
            for (var i = 0; i < cklist.length; i++) {
                cklist[i].index = i; //shen  me  yi si
                cklist[i].onclick = function () {
                    //单选按钮和多选按钮已经选中的话，对列表的商品选择一旦有改变，对号就消失
                    if (ckfan.checked == true || ckall.checked == true) {
                        ckfan.checked = false;
                        ckall.checked = false;
                    }
                    if (this.checked) { //当前对象选中
                        bpar[this.index].className = "b-par bgcolor";
                    } else {
                        bpar[this.index].className = "b-par"; //对象的索引
                    }
                    totalprice(partotal, cklist, money);
                }
                //删除事件
                btndelete[i].index = i;
                btndelete[i].onclick = function () {
                    bpar[this.index].remove();
                    totalprice(partotal, cklist, money);
                   for (var k = 0; k < btndelete.length; k++) {
                        btndelete[k].index = k;
                        cklist[k].index = k;
                        parbtnl[k].index = k;
                        parbtnr[k].index = k;
                        parsale[k].index = k;
                    }
                }
            }
            //数量
            for (var i = 0; i < parbtnl.length; i++) {
                parbtnl[i].index = i;
                parbtnl[i].onclick = function () {
                    var val = parsale[this.index].value;
                    val--;
                    if (val < 1) {
                        val = 1;
                    }
                    parsale[this.index].value = val;
                    //xiaoji
                    partotal[this.index].innerHTML = smallTotale(price, this.index, val) + "$";
                    totalprice(partotal, cklist, money);
                }
                parbtnr[i].index = i;
                parbtnr[i].onclick = function () {
                    var val = parsale[this.index].value;
                    val++;
                    parsale[this.index].value = val;
                    //xiaoji
                    partotal[this.index].innerHTML = smallTotale(price, this.index, val) + "$";
                    totalprice(partotal, cklist, money);
                }
                //键盘输入的时候
                parsale[i].onkeydown = function (e) {
                    if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode === 8 && this.value != "1") {
                        if (this.value == "1") {
                            alert("该宝贝不能删。");
                            return false;
                        }
                    } else {
                        return false;
                    }
                }
                parsale[i].index = i;
                parsale[i].onkeyup = function () {
                    if (this.value == "") {
                        this.value = 0;
                    }
                    partotal[this.index].innerHTML = smallTotale(price, this.index, this.value) + "$";
                    totalprice(partotal, cklist, money);
                }
            }
        }
        // /小计
        function smallTotale(obj, index, num) {
            return obj[index].getAttribute("data-price") * num;
        }
        //总价
        function totalprice(obj, box, money) {
            var allpricejg = 0;
            for (var i = 0; i < obj.length; i++) {
                if (box[i].checked) {
                    allpricejg += parseFloat(obj[i].innerHTML);
                }
            }
            money.innerHTML = allpricejg;
        }
    </script>
</body>

</html>

总结

回过头来再检查，发现一堆bug。。。
bug1：输入1没有警告框，可改为0
在这里插入图片描述
bug2：点击“-”按钮 ，0变1
在这里插入图片描述

不归少年
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用js实现购物车相关功能
weixin_63489869的博客
06-22 4718
利用js实现购物车相关功能
js淘宝购物车代码.zip
07-11
js淘宝加入购物车代码
javaScript 之淘宝购物车（课程总复习，个人小项目）
m0_64043477的博客
03-12 2935
前言： 目录： 1. 2. 3. 一. 二. 结束语：
JS特效第59弹：仿淘宝购物车
weixin_38343072的博客
01-01 482
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 388
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
JavaScript(二十一）淘宝购物车demo
We_jia的博客
03-07 1377
效果图展示 思路分析 本案例有一个重要的知识点就是索引对索引 通过搭建桥梁 1.实现点击按钮框 2.实现商品数量的加减 3.算每一件商品的总金额 小数点 保留俩位 ().toFixed (2) 4.算所有选中商品的总金额以及点+ -时的总金额 5.只选某几个商品的总金额 加单独事件 6.处理全选的问题 7.已选商品个数 HTML代码 &lt;!DOCTYPE...
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8186
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
用JavaScript+html+css制作当当购物车
热门推荐
weixin_46409887的博客
03-13 2万+
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{width: 810px; margin: 0 auto; font-family: "微软雅黑";} .logo{margin: 10px 0;} .logo span{ display: inline-block...
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
原生js实现淘宝购物车功能
10-20
本文将详细介绍如何使用原生JavaScript实现一个淘宝购物车功能。购物车功能是电商网站的核心部分，它允许用户选择商品并管理他们的购物清单。我们将探讨如何实现商品的增加和减少、总价计算以及显示最贵商品价格等...
vue实现淘宝购物车功能
10-15
总的来说，通过Vue.js实现淘宝购物车功能，我们需要理解Vue的数据绑定、组件化、事件处理等核心特性，并结合实际业务需求进行开发。以上代码仅为示例，实际开发时需根据具体需求进行调整和完善。
高仿淘宝购物车结算js代码.rar
09-17
高仿淘宝购物车结算js代码.rar
淘宝购物车效果js实现
02-19
淘宝购物车效果javascript实现，值得下载一看
用JS做的一个关于淘宝网的网站
07-02
用JS做的一个关于淘宝网的网站，还是不错的，可以达到链接网站！！适用于初学者！！
js对购物车内的商品的更删改查操作
10-22
js 对购物车内的商品的更删改查操作。 更新购物车中某一商品的数据,如果购物车中不存在则添加新值。 内部方法，必须在购物车操作中执行
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
模仿淘宝网购物车纯JS实现
01-09
在本项目中，我们主要探讨如何使用纯JavaScript（JS）技术来实现一个功能完善的购物车系统，模拟淘宝网的购物体验。购物车是电子商务网站的核心组成部分，它允许用户选择商品并进行购买前的预览、数量调整以及删除...
Python爬虫实战：淘宝购物车
u010543848的博客
03-18 3801
参考文档：https://blog.csdn.net/liujiayu2/article/details/79385958 环境：Python3.6 IDE：PyCharm
获取购物车的商品列表
t79036912的博客
11-13 378
buyer_order_express获取购买到的商品订单物流。buyer_order_detail获取购买到的商品订单详情。buyer_order_list获取购买到的商品订单列表。seller_order_list获取卖出的商品订单列表。buyer_address_list收货地址列表。buyer_address_add添加收货地址。seller_cat_props商品分类属性。buyer_token买家token。custom自定义API操作。参数说明：page:页码。
用JS写一个淘宝购物车
05-10
好的，以下是一个简单的淘宝购物车示例： HTML代码： ```html <!DOCTYPE html> 淘宝购物车 淘宝购物车 <!-- 这里用JavaScript动态添加购物车商品列表 --> 总价：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值