js 购物车基本功能的实现

最新推荐文章于 2024-06-18 17:19:20 发布
最新推荐文章于 2024-06-18 17:19:20 发布
阅读量9.6k 收藏 111
点赞数 31
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43314846/article/details/99550213
版权
先上一个效果图

在这里插入图片描述

步骤：
① 用js语句画页面（for循环创建四个元素）
② 实现全选功能：当全选的checked为true时，所有元素被选中（包括checked为true和被背景变为粉色）。当全选的checked为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中
③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中
④ 实现单选功能：当有一个元素未被选中时，全选按钮取消选中
⑤ 在window.onload=function(){}中对各个元素进行操作（不同浏览器可能会无法获取各个元素的相关属性值）
⑥ 在实现对元素的操作时，采用的是索引对索引的方式。通过索引对元素的数量/价钱进行操作。
⑦ 在实现对元素的数量的文本框输入的功能时，需要对输入的元素进行判断（在onkeydown事件中进行判断）：若输入的值为空时，在文本框失去焦点时，其value自动变为1。当输入的值为0时，在按完键后立刻变为1。文本框内也要限制输入英文字符（但不包括backspace按键。）。当输入完毕时（onkeyup事件）：小计和总计值跟随着输入的数字的变化而变化
⑧ 在实现删除按钮功能时，需要对所有元素的索引值重新赋值（删除一个元素，数组的长度减一，各个元素的索引都会发生改变）
⑨ 实现⑧的方法：在删除元素后，重新遍历新的对象数组，将新的k值赋给每一个元素的value值（之前用value记录每个元素的索引值）

文本框输入数量：
  //对文本框的操作
        for (var i = 0; i < bEle.length; i++) {
            bCountInput[i].countNum = i;
            bCountInput[i].onkeydown = function (e) {
            //对输入的字符进行判断，如果非数字且不是回退键，则return false（return false则不输入）
                if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) {
                } else {
                    return false
                }
            };
            bCountInput[i].onblur = function () {
            //当文本框的值为空时，在失去焦点后变为1
                if (this.value == "") {
                    this.value = 1;
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                }
            };
            bCountInput[i].onkeyup = function () {
            //当按键0时，立刻跳转为1
                if (this.value == "") {
                    bTotal[this.countNum].innerHTML = "0￥";
                } else if (this.value == 0) {
                    this.value = 1;
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥"
                } else {
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                }
                allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
            }
        }
删除按钮：
        for (var i = 0; i < bEle.length; i++) {
            eleDelete[i].value = i;
            eleDelete[i].onclick = function () {
                bList.removeChild(bEle[this.value]);
                for(var k = 0;k<bEle.length;k++){
                    //重新给所有对象的value/countNum赋值其对应的新的索引值
                    eleDelete[k].value = k;
                    buttonSub[k].countNum=k;
                    bCountInput[k].countNum=k;
                    buttonAdd[k].countNum=k;
                }
                allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
            }
完整代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        .all {
            width: 1000px;
            margin: auto;
        }

        .b-top {
            display: flex;
            flex-direction: row;
            background: #ffe0cb;
            height: 30px;
            line-height: 30px;
        }

        .b-info {
            flex: 1;
            text-align: center;
        }

        .b-length {
            flex: 2;
        }

        .b-ele {
            display: flex;
            flex-direction: row;
            height: 70px;
            line-height: 70px;
            padding: 10px 0;
            border-bottom: 1px dashed silver;
        }

        .b-ele div {
            text-align: center;
        }

        .chooseEle {
            background: pink;
        }

        .b-button {
            color: blue;
            width: 60px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background: silver;
            border: none;
        }

        .b-count-button {
            width: 25px;
            height: 25px;
            border: none;
            color: blue;
            background: orange;
        }

        .b-count-input {
            border: none;
            height: 20px;
            width: 25px;
            outline: none;
            text-align: center;
        }

        img {
            width: 25px;
            height: 25px;
        }

        .b-display {
            display: flex;
            justify-content: space-between;
        }

        .b-display div {
            width: 120px;
            height: 40px;
            line-height: 40px;
        }

        .left {
            text-align: center;
        }

        .right button {
            width: 100%;
            height: 100%;
            background: red;
            color: white;
            text-align: center;
            border: none;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="b-top">
        <div class="b-info">
            <input type="checkbox" class="checkAll"/>全选
        </div>
        <div class="b-info b-length">商品名称</div>
        <div class="b-info">图片</div>
        <div class="b-info">单价</div>
        <div class="b-info b-length">数量</div>
        <div class="b-info">小计</div>
        <div class="b-info">操作</div>
    </div>
    <div class="b-list"></div>
    <div class="b-display">
        <div class="left">
            <input type="checkbox" class="reverseCheck"/>反选
        </div>
        <div class="center">
            总价:<span class="allPrice">0￥</span>
        </div>
        <div class="right">
            <button>去结算></button>
        </div>
    </div>
</div>
</body>
<script>
    var cart = [
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1499",
            "totle": "1499",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1599",
            "totle": "1599",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1699",
            "totle": "1699",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1799",
            "totle": "1799",
            "num": 1
        }
    ];
    var bTop = document.getElementsByClassName("b-top")[0];
    var bList = document.getElementsByClassName("b-list")[0];
    //动态创建页面
    for (var i = 0; i < cart.length; i++) {
        var bEle = document.createElement("div");
        bEle.className = "b-ele";
        bList.appendChild(bEle);

        var bNode = document.createElement("div");
        bNode.className = "b-info";
        var bInput = document.createElement("input");
        bInput.type = "checkbox";
        bInput.className = "check"
        bNode.appendChild(bInput);
        bEle.appendChild(bNode);

        var bNode = document.createElement("div");
        bNode.className = "b-info b-length";
        bNode.innerHTML = cart[i].name;
        bEle.appendChild(bNode);

        var bNode = document.createElement("div");
        bNode.className = "b-info";
        bNode.style.lineHeight = "80px"
        var bImg = document.createElement("img");
        bImg.src = cart[i].src;
        bNode.appendChild(bImg);
        bEle.appendChild(bNode);

        var bNode = document.createElement("div");
        bNode.className = "b-info b-price";
        bNode.innerHTML = cart[i]["price"] + "￥";
        bEle.appendChild(bNode);

        var bNode = document.createElement("div");
        bNode.className = "b-info b-length";
        var bCountButtonSub = document.createElement("button");
        bCountButtonSub.className = "b-count-button buttonSub";
        bCountButtonSub.innerHTML = "-";
        var bCountInput = document.createElement("input");
        bCountInput.type = "text";
        bCountInput.className = "b-count-input";
        bCountInput.value = cart[i].num;
        var bCountButtonAdd = document.createElement("button");
        bCountButtonAdd.className = "b-count-button buttonAdd";
        bCountButtonAdd.innerHTML = "+";
        bNode.appendChild(bCountButtonSub);
        bNode.appendChild(bCountInput);
        bNode.appendChild(bCountButtonAdd);
        bEle.appendChild(bNode)

        var bNode = document.createElement("div");
        bNode.className = "b-info b-total";
        bNode.innerHTML = cart[i].totle + "￥";
        bEle.appendChild(bNode);

        var bNode = document.createElement("div");
        bNode.className = "b-info";
        var bCountButton = document.createElement("button");
        bCountButton.className = "b-button eleDelete";
        bCountButton.innerHTML = "删除";
        bNode.appendChild(bCountButton)
        bEle.appendChild(bNode)
    }
    ;
    //全选
    var checkAll = document.getElementsByClassName("checkAll")[0];
    var check = document.getElementsByClassName("check");
    var bEle = document.getElementsByClassName("b-ele");
    var allPrice = document.getElementsByClassName("allPrice")[0];
    checkAll.onclick = function () {
        for (var i = 0; i < check.length; i++) {
            reverseCheck.checked = false
            if (checkAll.checked == true) {
                check[i].checked = true;
                bEle[i].className = "b-ele chooseEle";
            } else {
                bEle[i].className = "b-ele";
                check[i].checked = false;
            }
        }
    };
    //反选
    var reverseCheck = document.getElementsByClassName("reverseCheck")[0];
    reverseCheck.onclick = function () {
        //输入数量
        for (var i = 0; i < check.length; i++) {
            check[i].checked = !check[i].checked;
            if (check[i].checked == false) {
                bEle[i].className = "b-ele";
                checkAll.checked = false;
            } else {
                bEle[i].className = "b-ele chooseEle";
            }
        }
    };
    //单选
    for (var i = 0; i < bEle.length; i++) {
        check[i].checkValue = i;
        check[i].onclick = function () {
            console.log(this.checked)
            if (this.checked == true) {
                console.log(this.className)
                bEle[this.checkValue].className = "b-ele chooseEle";
            } else {
                checkAll.checked = false;
                bEle[this.checkValue].className = "b-ele"
            }
        }
    }
    window.onload = function (ev) {
        //

        var buttonSub = document.getElementsByClassName("buttonSub");
        var buttonAdd = document.getElementsByClassName("buttonAdd");
        var bCountInput = document.getElementsByClassName("b-count-input");
        var bEle = document.getElementsByClassName("b-ele");
        var bTotal = document.getElementsByClassName("b-total");
        var bPrice = document.getElementsByClassName("b-price");
        var eleDelete = document.getElementsByClassName("eleDelete");
        var allPrice = document.getElementsByClassName("allPrice")[0];
        //数量进行加减
        allPrice.innerHTML = cacAllPrice(bTotal)+"￥";
        for (var i = 0; i < bEle.length; i++) {
            buttonSub[i].countNum = i;
            buttonSub[i].onclick = function () {
                if (bCountInput[this.countNum].value == 1) {
                    alert("该宝贝不能减少了噢!")
                } else {
                    var value = --bCountInput[this.countNum].value;
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "￥";
                    allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
                }
            };
            buttonAdd[i].countNum = i;
            buttonAdd[i].onclick = function () {
                var value = ++bCountInput[this.countNum].value;
                bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, value) + "￥";
                allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
            }
        }
        //对文本框的操作
        for (var i = 0; i < bEle.length; i++) {
            bCountInput[i].countNum = i;
            bCountInput[i].onkeydown = function (e) {
                if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8) {
                } else {
                    return false
                }
            };
            bCountInput[i].onblur = function () {
                if (this.value == "") {
                    this.value = 1;
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                }
            };
            bCountInput[i].onkeyup = function () {
                if (this.value == "") {
                    bTotal[this.countNum].innerHTML = "0￥";
                } else if (this.value == 0) {
                    this.value = 1;
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥"
                } else {
                    bTotal[this.countNum].innerHTML = cacTotal(this.countNum, bPrice, this.value) + "￥";
                }
                allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
            }
        }
        //删除元素
        console.log(bEle.length);
        for (var i = 0; i < bEle.length; i++) {
            eleDelete[i].value = i;
            eleDelete[i].onclick = function () {
                bList.removeChild(bEle[this.value]);
                for(var k = 0;k<bEle.length;k++){
                    //重新给所有对象的value/countNum索引值
                    eleDelete[k].value = k;
                    buttonSub[k].countNum=k;
                    bCountInput[k].countNum=k;
                    buttonAdd[k].countNum=k;
                }
                allPrice.innerHTML = cacAllPrice(bTotal)+"￥"
            }
        }
    }

    //计算小计
    function cacTotal(index, priceObj, value) {
        return parseFloat(priceObj[index].innerHTML) * parseInt(value);
    }
    //计算总价
    function cacAllPrice(bTotal) {
        var totalPrice=0;
        for(var i=0;i<bTotal.length;i++){
            totalPrice += parseFloat(bTotal[i].innerHTML)
        }
        return totalPrice;
    }


</script>
</html>
Lemon
关注
  • 31
    点赞
  • 踩
  • 111
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JS实现购物车动态功能
weixin_30933531的博客
05-25 5714
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
javaweb mysql购物车_javaweb购物车实现的几种方式
weixin_33168937的博客
02-03 1907
之前没有接触过购物车的东东，也不知道购物车应该怎么做，所以在查询了很多资料，总结一下购物车的功能实现。查询的资料，找到三种方法：1.用cookie实现购物车；2.用session实现购物车；3.用cookie和数据库(购物车信息持久化)实现购物车；分析一下这三种方法的优缺点：1.单纯有cookie实现购物车，这样的购物车不是很理想，设想一下，如果客户端的浏览器把cookie给禁用了，这种方法就会在...
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
基础购物车（Javascript）
最新发布
2301_81449444的博客
06-18 404
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
JS实现购物车的基本功能
qq_41605893的博客
11-06 7812
JS实现购物车商品 加、减、单选、全选、删除、手动输入、价格更新等功能 JavaScript代码 $(function(){ $("#footer").hover(function(){ $("#footer").css({"border":"#e00"}) },) var inputs=document.getElementsByName("good-id"); var all=document.getElementsByName("all")[0]; all.onclick=
利用js实现购物车相关功能
weixin_63489869的博客
06-22 4776
利用js实现购物车相关功能
js实现简单的购物车功能
七月的你的博客
09-03 1349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JavaScript实现购物车基本功能
10-19
本篇文章将介绍如何使用JavaScript实现一个简单购物车的基本功能。这包括如何添加商品到购物车、全选或单个商品的选择、修改商品数量以及删除商品等功能。 首先，我们来看HTML结构部分。页面中有一个表格，表格的...
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
jquery实现购物车基本功能
10-16
以上就是使用jQuery实现购物车基本功能的主要步骤。当然，实际应用中，购物车功能可能还需要与服务器进行数据交互，保存用户的选择，处理库存等问题。但这个基础版本已经足以展示如何使用jQuery来处理常见的前端交互...
购物车js代码_JS实现购物车商品列表结算功能代码.rar
11-22
这个“购物车js代码_JS实现购物车商品列表结算功能代码.rar”压缩包提供了一套JavaScript实现的购物车系统，旨在帮助开发者快速构建具有这些功能的前端界面。 首先，我们来看“购物车功能”的主要组成部分： 1. **...
JS实现购物车功能
qq_46362763的博客
03-17 9461
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。
js实现购物车
m0_73481765的博客
06-30 3935
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
javascript实现简单购物车功能（有图）
weixin_43144288的博客
08-29 1673
javascript实现简单购物车功能（有图） 本文链接：https://blog.csdn.net/qq_41140741/article/details/81543105 Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 <!DOCTYPE html> <html> <head&gt...
原生js实现购物车相关功能
weixin_30407099的博客
11-10 116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现购物车的相关功能</title> <style> *{ margin:0; ...
JavaScript实现购物车功能的代码详解
通过以上步骤，我们可以构建一个基本的JavaScript购物车系统，为用户提供方便的商品管理功能。对于JavaScript初学者来说，这是一个很好的实践项目，有助于理解和掌握JavaScript的核心概念和实际应用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值