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

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

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

    购物车功能，对初学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实现一个简便的可以实行增删改查的购物车功能

          本文链接：https://www.haomeiwen.com/subject/zopyvctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|用js实现一个简便的可以实行增删改查的购物车功能|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！