用js实现一个简便的可以实行增删改查的购物车功能

作者: 光年之外iii | 来源:发表于2019-10-27 11:58 被阅读0次

用js实现一个简便的可以实行增删改查的购物车功能
JDBC进阶1——对数据库表进行增删改查
DOM 的一些增删改查
增删改查
10_Node.js 连接 MySQL 及增删改查功能实现
linux中sed的常用方法.md
关于python的list的增查删改
day11
spring-boot react一步一步实现增删改查组件化
WEB 七

购物车功能，对初学js的人来说，可谓是一项难度颇高的挑战，它会对初接触的人进行一个综合性的考核。所以，为了更方便的写出这些代码，首先心里要有一个完整的规划。
当把购物车的静态样式都写好之后，首先要做的便是添加了，只有先添加了数据，才能对数据进行物品数量和总价的增加，删除数据等功能

var data = [{
        name: 'LANCÔME 兰蔻 新菁纯丝绒雾面唇膏 505 3.4克',
        yuan_price: 270,
        now_price: 259,
        num: 1,
        sum: 259,
        img: '1.png',
        isChecked: true
    },
    {
        name: 'ESTĒE LAUDER 雅诗兰黛 持妆粉底液 30毫升',
        yuan_price: 390,
        now_price: 298,
        num: 1,
        sum: 298,
        img: '2.png',
        isChecked: false
    },
    {
        name: 'ESTĒE LAUDER 雅诗兰黛小棕瓶面部精华 特润修护肌透精华露 50毫升',
        yuan_price: 850,
        now_price: 539,
        num: 1,
        sum: 539,
        img: '3.png',
        isChecked: true
    },
    {
        name: 'LANCÔME 兰蔻 玫瑰露清滢柔肤粉水 400毫升 干皮真爱',
        yuan_price: 420,
        now_price: 319,
        num: 1,
        sum: 319,
        img: '4.png',
        isChecked: true
    },
    {
        name: "【刘昊然同款】Kiehl's/科颜氏 牛油果眼霜 28g 保湿淡化细纹黑眼圈眼袋",
        yuan_price: 400,
        now_price: 272,
        num: 2,
        sum: 544,
        img: '5.png',
        isChecked: false
    }
];
var content = document.getElementById('content')
function getHtml(data) {
    var str = ''
    for (var i in data) {
        str += `<ol>
     <li><input type="checkbox" name="" class="every_check"  ${data[i].isChecked?'checked':''}><img src="./img/${data[i].img}" alt=""></li>
     <li>${data[i].name}</li>
     <li>
         <p><del>${data[i].yuan_price}</del></p>
         <p>${data[i].now_price}</p>
     </li>
     <li>
         <button class='jian'>-</button>
         <input type="text" name="" value='${data[i].num}' class="input1" >
         <button class='jia'>+</button>
     </li>
     <li class='sum'>${data[i].sum}</li>
     <li class='del'>删除</li>
 </ol>`

    }
    content.innerHTML = str;

因为在删除时，每删除一条数据，内容就得重新写入一次，所以在这里封装函数，方便进行调用。写入之后，就可以对数据进行加减了，所以，要设置在点击加减时，数据也要随之变化

function getNum() {
    var jia = document.querySelectorAll('.jia');
    var input = document.querySelectorAll('.input1');
    var jian = document.querySelectorAll('.jian');
    var sum = document.querySelectorAll('.sum');
    var all_check = document.getElementById('all_check');
    var every_check = document.querySelectorAll('ol li .every_check');

    //声明
    for (var a in jia) {
        jia[a].ind = a;
        //遍历并保留当前项
        jia[a].onclick = function () {
            data[this.ind].num++;
            //点击时，data中的数量++
            jian[this.ind].disabled = false;
            //数量最小为1，当>1时，减号恢复
            input[this.ind].value = data[this.ind].num;
            //让input中的value值=data中的数量
            data[this.ind].sum = data[this.ind].num * data[this.ind].now_price;
            //总价=数量*当前单价
            sum[this.ind].innerHTML = data[this.ind].sum
            //写入当前总价
            getZongjia()
        }
    }
    for (var b in jian) {
        jian[b].ind = b;
        jian[b].onclick = function () {
            if (input[this.ind].value <= 1) {
                //判断，当值小于1时，减号不可再点击
                jian[this.ind].disabled = true
            } else {
                data[this.ind].num--
                //点击时，data中的数量--
                input[this.ind].value = data[this.ind].num;
                //让input中的value值=data中的数量
                data[this.ind].sum = data[this.ind].num * data[this.ind].now_price;
                //总价=数量*当前单价
                sum[this.ind].innerHTML = data[this.ind].sum
                //写入当前总价

            }
            getZongjia()
        }

    }

设置好了加减之后，需要设置点击选择框，全选和子选框，点击全选，子选框就会全部勾选，子选框一个取消勾选，全选状态就会取消。

all_check.onclick = function () {
        var bool = all_check.checked;
        //声明一个变量保存all_check的选中状态
        for (var i = 0; i < every_check.length; i++) {
            every_check[i].checked = bool;
            //循环遍历每个子选框，让每个子选框与all_check的选中状态保持相同
            data[i].isChecked = bool;
        }
        getZongjia()
    }
    for (var i = 0; i < every_check.length; i++) {
        every_check[i].ind = i;
        //遍历并保留当前选中的下标
        every_check[i].onclick = function () {
            //让数据中的isChecked状态与子选框中的checked状态保持一致
            data[this.ind].isChecked = every_check[this.ind].checked;
            var aa = data.every(function (item) {
                return item.isChecked
                //调用every方法，当所有数都返回true时，才返回
            })
            //让返回的值=all.check中的checked值，即有一个不为true时，全选框也不为true，全为true时,全选框为true
            all_check.checked = aa;
            getZongjia()

        }
    }

因为js的执行顺序是从上到下的，所以下部封装好的函数要提前到上部调用

function getZongjia() {
        var sum_num = 0;
        var zongjia = 0;
        //声明一个商品的种类和总价
        for (var i = 0; i < data.length; i++) {
            if (data[i].isChecked) {
                //当打勾的input状态为选中时
                sum_num++;
                //商品的种类递增
                zongjia += data[i].sum;
                //结算时的总价+=每种商品的总价
            }
        }
        //写入种类的数量和总价
        yixuan_num.innerHTML = sum_num;
        yixuan_zongjia.innerHTML = zongjia;
    }
    getZongjia();
    var del = document.querySelectorAll('.del')
    for (var i = 0; i < del.length; i++) {
        del[i].ind = i;
        del[i].onclick = function () {
            data.splice(this.ind, 1);
            //删除当前项，1的长度
            getHtml(data)
        }
    }

获取单价X数量后获得的总价，以及获取价格之后，点击删除键，对商品数据进行加减，一个简单的购物车就完成了
完整代码：

var data = [{
        name: 'LANCÔME 兰蔻 新菁纯丝绒雾面唇膏 505 3.4克',
        yuan_price: 270,
        now_price: 259,
        num: 1,
        sum: 259,
        img: '1.png',
        isChecked: true
    },
    {
        name: 'ESTĒE LAUDER 雅诗兰黛 持妆粉底液 30毫升',
        yuan_price: 390,
        now_price: 298,
        num: 1,
        sum: 298,
        img: '2.png',
        isChecked: false
    },
    {
        name: 'ESTĒE LAUDER 雅诗兰黛小棕瓶面部精华 特润修护肌透精华露 50毫升',
        yuan_price: 850,
        now_price: 539,
        num: 1,
        sum: 539,
        img: '3.png',
        isChecked: true
    },
    {
        name: 'LANCÔME 兰蔻 玫瑰露清滢柔肤粉水 400毫升 干皮真爱',
        yuan_price: 420,
        now_price: 319,
        num: 1,
        sum: 319,
        img: '4.png',
        isChecked: true
    },
    {
        name: "【刘昊然同款】Kiehl's/科颜氏 牛油果眼霜 28g 保湿淡化细纹黑眼圈眼袋",
        yuan_price: 400,
        now_price: 272,
        num: 2,
        sum: 544,
        img: '5.png',
        isChecked: false
    }
];
var content = document.getElementById('content')

var ol_lis = document.querySelectorAll('ol li')
var yixuan_num = document.getElementsByClassName('yixuan_num')[0];
var yixuan_zongjia = document.getElementsByClassName('yixuan_zongjia')[0];

function getHtml(data) {
    var str = ''
    for (var i in data) {
        str += `<ol>
     <li><input type="checkbox" name="" class="every_check"  ${data[i].isChecked?'checked':''}><img src="./img/${data[i].img}" alt=""></li>
     <li>${data[i].name}</li>
     <li>
         <p><del>${data[i].yuan_price}</del></p>
         <p>${data[i].now_price}</p>
     </li>
     <li>
         <button class='jian'>-</button>
         <input type="text" name="" value='${data[i].num}' class="input1" >
         <button class='jia'>+</button>
     </li>
     <li class='sum'>${data[i].sum}</li>
     <li class='del'>删除</li>
 </ol>`

    }
    content.innerHTML = str;
    getNum()
}
getHtml(data)


function getNum() {
    var jia = document.querySelectorAll('.jia');
    var input = document.querySelectorAll('.input1');
    var jian = document.querySelectorAll('.jian');
    var sum = document.querySelectorAll('.sum');
    var all_check = document.getElementById('all_check');
    var every_check = document.querySelectorAll('ol li .every_check');

    //声明
    for (var a in jia) {
        jia[a].ind = a;
        //遍历并保留当前项
        jia[a].onclick = function () {
            data[this.ind].num++;
            //点击时，data中的数量++
            jian[this.ind].disabled = false;
            //数量最小为1，当>1时，减号恢复
            input[this.ind].value = data[this.ind].num;
            //让input中的value值=data中的数量
            data[this.ind].sum = data[this.ind].num * data[this.ind].now_price;
            //总价=数量*当前单价
            sum[this.ind].innerHTML = data[this.ind].sum
            //写入当前总价
            getZongjia()
        }
    }
    for (var b in jian) {
        jian[b].ind = b;
        jian[b].onclick = function () {
            if (input[this.ind].value <= 1) {
                //判断，当值小于1时，减号不可再点击
                jian[this.ind].disabled = true
            } else {
                data[this.ind].num--
                //点击时，data中的数量--
                input[this.ind].value = data[this.ind].num;
                //让input中的value值=data中的数量
                data[this.ind].sum = data[this.ind].num * data[this.ind].now_price;
                //总价=数量*当前单价
                sum[this.ind].innerHTML = data[this.ind].sum
                //写入当前总价

            }
            getZongjia()
        }

    }
    all_check.onclick = function () {
        var bool = all_check.checked;
        //声明一个变量保存all_check的选中状态
        for (var i = 0; i < every_check.length; i++) {
            every_check[i].checked = bool;
            //循环遍历每个子选框，让每个子选框与all_check的选中状态保持相同
            data[i].isChecked = bool;
        }
        getZongjia()
    }
    for (var i = 0; i < every_check.length; i++) {
        every_check[i].ind = i;
        //遍历并保留当前选中的下标
        every_check[i].onclick = function () {
            //让数据中的isChecked状态与子选框中的checked状态保持一致
            data[this.ind].isChecked = every_check[this.ind].checked;
            var aa = data.every(function (item) {
                return item.isChecked
                //调用every方法，当所有数都返回true时，才返回
            })
            //让返回的值=all.check中的checked值，即有一个不为true时，全选框也不为true，全为true时,全选框为true
            all_check.checked = aa;
            getZongjia()

        }
    }

    function getZongjia() {
        var sum_num = 0;
        var zongjia = 0;
        //声明一个商品的种类和总价
        for (var i = 0; i < data.length; i++) {
            if (data[i].isChecked) {
                //当打勾的input状态为选中时
                sum_num++;
                //商品的种类递增
                zongjia += data[i].sum;
                //结算时的总价+=每种商品的总价
            }
        }
        //写入种类的数量和总价
        yixuan_num.innerHTML = sum_num;
        yixuan_zongjia.innerHTML = zongjia;
    }
    getZongjia();
    var del = document.querySelectorAll('.del')
    for (var i = 0; i < del.length; i++) {
        del[i].ind = i;
        del[i].onclick = function () {
            data.splice(this.ind, 1);
            //删除当前项，1的长度
            getHtml(data)
        }
    }
}

页面结构代码

<!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-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shopping.css">
</head>
<body>
    <div>
        <ul>
            <li><input type="checkbox" name="" id="all_check">全选</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
        </ul>
        <div id="content">
           
        </div>
        <div class="bottom">
            已选商品<span class="yixuan_num"></span>种
            商品总价：<span class="yixuan_zongjia"></span>
        </div>
    </div>
</body>
<script src="./js/shopping.js"></script>
</html>

css样式代码:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  width: 800px;
  height: 500px;
  border: solid 2px red;
  margin: 0 auto;
}

ul {
  width: 100%;
  height: 60px;
  display: flex;
  line-height: 60px;
  background: pink;
}

ul li {
  flex: 1;
  text-align: center;
}

ul li:nth-child(2) {
  flex: 2;
  text-align: center;
}

input {
  margin-right: 5px;
  width: 20px;
  height: 20px;
}

ol {
  width: 100%;
  height: 100px;
  display: flex;
  background: #ccc;
  justify-content: space-around;
  align-items: center;
}

ol li {
  flex: 1;
  text-align: center;
}

ol li img {
  width: 80px;
  height: 80px;
}

ol li:nth-child(1) {
  vertical-align: middle;
}

ol li:nth-child(1) input, ol li:nth-child(1) img {
  vertical-align: middle;
}

ol li:nth-child(2) {
  flex: 2;
}

ol li:nth-child(4) {
  font-size: 0px;
}

ol li:nth-child(4) input {
  width: 23px;
  height: 23px;
  margin: 0;
  float: left;
  text-align: center;
  font-size: 20px;
}

ol li:nth-child(4) button {
  width: 26px;
  height: 26px;
  font-size: 14px;
  float: left;
}

.bottom {
  width: 800;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  color: red;
  font-weight: 900;
}

用js实现一个简便的可以实行增删改查的购物车功能
购物车功能，对初学js的人来说，可谓是一项难度颇高的挑战，它会对初接触的人进行一个综合性的考核。所以，为了更方便的...
JDBC进阶1——对数据库表进行增删改查
《Java从入门到精通》20章20.4.7可以实现对数据进行增删改查功能：对test库中tb_stu表进行查询，增...
DOM 的一些增删改查
以下是JS中DOM节点中增删改查的基本API：查增删改学习参考：原生JS中CSS相关API合集
增删改查
增删改查，是实现数据操作的基本功能。在数据库的操作中，习惯把它分为两大类，数据查询（查）和数据更新（增、删、改）...
10_Node.js 连接 MySQL 及增删改查功能实现
本篇文章讲解了 Node.js 连接 MySQL 并实现增删改查功能。一、设计表首先通过可视化工具进行表的设计...
linux中sed的常用方法.md
基本用法： sed是流编辑器，stream editor可以实现对文件的增删改查 1.增 a 追加内容 i 插入内...
关于python的list的增查删改
说到增查删改，想起了数据库，我们在关系型数据库当中就会对表进行增查删改。在python当中我们也可以对list进...
day11
vue前端，实现基础的增删改查 1.json数据 2.js代码 3.将数据绑定到html里面主要还是增删改查的语句
spring-boot react一步一步实现增删改查组件化
在 spring-boot react一步一步实现增删改查中，用一个组件实现了表格和表单功能，所以现在需要将其拆...
WEB 七
用JS写一些常用的特效 1.倒计时功能 2.购物车功能的实现代码比较繁琐只贴了JS部分比较重要的几个函数 ...