#今日说码栏目# 第二十七集 JS实现购物车模块

最新推荐文章于 2023-03-29 19:16:14 发布

房东的_猪

最新推荐文章于 2023-03-29 19:16:14 发布

阅读量187

点赞数 4

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Abner_/article/details/126677498

版权

1、HTML和CSS部分

使用到一般常用的div、input按钮、button按钮、ul列表、

<!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>
  <style>
    * {
      padding: 0;
      margin: 0;
      text-decoration: none;
      list-style-type: none;
    }

    body {
      background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      background-repeat: no-repeat;
    }

    .shop_container {
      position: relative;
    }

    .select_container {
      width: 80%;
      height: 80px;
      margin: 0 auto;
      background-color: white;
      margin-top: 20px;
      line-height: 80px;
    }

    .select_container>input {
      width: 400px;
      height: 40px;
      padding-left: 20px;
      outline: none;
    }

    input {
      border-radius: 7px;
    }

    .btn {
      height: 40px;
      background-color: #a59e9e;
      width: 130px;
      cursor: pointer;
      border: none;
      border-radius: 7px;
    }

    .btn:hover {
      background-color: #a6c1ee;
    }

    .btn:active {
      background-color: #fbc2eb;
    }

    label {
      padding-left: 10px;
    }

    .check_container,
    .check_container1 {
      width: 80%;
      margin: 0 auto;
      background-color: white;
    }

    .check_container1 {
      margin-top: 20px;
    }

    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #CCCCCC;
    }

    ul>li {
      display: inline-block;
      width: 300px;
      padding-left: 40px;
    }

    .aggregate_container {
      width: 80%;
      height: 60px;
      margin: 0 auto;
      background-color: white;
      margin-top: 20px;
      line-height: 60px;
    }

    .aggregate_container>div {
      padding-left: 10px;
    }

    .aggregate_container span {
      color: red;
    }

    .aggregate_container a {
      padding-left: 10px;
      color: rgb(134, 134, 243);
    }
  </style>
</head>

<body>
  <div class="shop_container">
    <div class="select_container">
      <label for="">商品名称：</label>
      <input type="text" name="" id="shopname">

      <label for="">商品价格：</label>
      <input type="text" name="" id="shopprice">

      <button class="btn">加入购物车</button>
    </div>
    <div>
      <div class="check_container1">
        <ul>
          <li><input type="checkbox" class="selectAll"><span>全选按钮</span></li>
          <li>商品名称</li>
          <li>商品价格</li>
          <li>数量</li>
          <li>操作</li>
        </ul>
      </div>
      <div class="check_container">
      </div>
    </div>
    <div class="aggregate_container">
      <div>总共<span class="count">0</span>件商品,共计<span class="sumprice">0</span>元<a href="javaScript:;"
          class="delAll">清空购物车的商品</a>
      </div>
    </div>
  </div>
  <script src="./cart.js"></script>
</body>
</html>

2、JS模块

①获取各元素

 goods = [];  //  商品数组
    //  获得各元素
    itembox = document.querySelector(".check_container");
    btn = document.querySelector(".btn");
    selectAll = document.querySelector(".selectAll");
    count = document.querySelector(".count");
    sumprice = document.querySelector(".sumprice");
    delAll = document.querySelector(".delAll");

②添加商品事件

 //  添加商品事件
    constructor( ) {
        if (localStorage.getItem("goods")) {
            this.goods = JSON.parse(localStorage.getItem("goods"));
        }
         this.render( );
         this.addEvent( );
    }

③所有的监听事件(将所有的监听事件都放在addEvent()方法中)

//  所有的监听事件
    addEvent( ) {
        let this_ = this;

④添加新的购物车商品

  //   添加新的购物车商品
        this.btn.addEventListener("click", function (e) {
            let title = document.getElementById("shopname").value;
            let price = document.getElementById("shopprice").value;
            this_.addgoods({ title: title, price: price });
        })

⑤删除功能

 this.itembox.addEventListener("click", function (e) {
    //  删除功能
            if (e.target.name == "del") {
                let id = e.target.parentNode.parentNode.children[0].children[0].id;
                this_.delGoods(id);
            }

⑥点击框改变

 //   点击框改变
            if (e.target.name == "cekbox") {
                let id = e.target.parentNode.parentNode.children[0].children[0].id;
                this_.upDateGoods(id, "checked", e.target.checked);
                this_.isSelectAll();
            }
            if (e.target.name == 'del1' || e.target.name == 'add') {
                let id = e.target.parentNode.parentNode.children[0].children[0].id;
                this_.changeNum(e.target.name, id);
            }
        })

⑦全选按钮事件

//全选按钮事件
        this.selectAll.addEventListener("click", function () {
            this_.selectAllGoods(this.checked);
        })

⑧删除所有选择

 //删除所有选择
        this.delAll.addEventListener("click", function () {
            this_.goods = [];
            this_.render();
        })
        this.render()
    }

⑨添加商品函数

//添加商品函数
    addgoods(obj) {
        obj.id = Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString();
        obj.num = 1;
        obj.checked = false;
        this.goods.push(obj);
        this.render()
    }

⑩删除商品函数

// 删除商品函数
    delGoods(id) {
        for (let i = 0; i < this.goods.length; i++) {
            if (this.goods[i].id == id) {
                this.goods.splice(i, 1);
            }
        }
        this.render();
    }

⑪更新数据

 // 更新数据
    upDateGoods(id, k, v) {
        for (let i = 0; i < this.goods.length; i++) {
            if (this.goods[i].id == id) {
                this.goods[i][k] = v;
            }
        }
        this.render();
    }

⑫全选按钮状态

// 全选按钮状态
    selectAllGoods(checked) {
        for (let i = 0; i < this.goods.length; i++) {
            this.goods[i].checked = checked;
        }
        this.render();
    }

⑬是否全选

// 是否全选
    isSelectAll( ) {
        let flag = true;
        for (let i = 0; i < this.goods.length; i++) {
            if (this.goods[i].checked == false) {
                flag = false;
            }
        }
        this.selectAll.checked = flag;
        this.render();
    }

⑭改变商品数字

// 改变商品的数字
    changeNum(type, id) {
        for (let i = 0; i < this.goods.length; i++) {
            if (this.goods[i].id == id) {
                if (type == 'add') {
                    this.goods[i].num++;
                } else {
                    this.goods[i].num--;
                    this.goods[i].num = this.goods[i].num > 0 ? this.goods[i].num : 1;
                }
            }
        }
        this.render();
    }

⑮渲染itembox

 // 渲染itembox
    render( ) {
        let str = "";
        for (let i = 0; i < this.goods.length; i++) {
            str += `
            <ul class="item">
            <li><input type="checkbox" class="checkitem" id="${this.goods[i].id}"  ${this.goods[i].checked ? "checked" : ""} name = "cekbox"></li>
            <li>${this.goods[i].title}</li>
            <li>${this.goods[i].price}元</li>
            <li><a href="javaScript:;" name="del1"> - </a> <input type="text" name="" id="" value="${this.goods[i].num}" style="width: 50px;"><a href="javaScript:;" name="add">+</a></li>
            <li><a href="javaScript:;" class="del" name="del">删除</a></li>
            </ul>`
        }
        this.itembox.innerHTML = str;
        this.changeButtom( );
        localStorage.setItem("goods", JSON.stringify(this.goods));
    }

⑯更改价格和数量

 // 更改价格和数量
    changeButtom( ) {
        this.count.innerText = this.goods.length;
        let amount = 0;
        for (let i = 0; i < this.goods.length; i++) {
            if (this.goods[i].checked) {
                amount = amount + this.goods[i].num * this.goods[i].price;
            }
        }
        this.sumprice.innerText = amount;
    }
  }