JS项目全栈（购物车）ES6

最新推荐文章于 2024-10-02 05:39:15 发布
Futuregeneratio
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量258
点赞数 3
文章标签： javascript es6 前端 css3 html5
本文链接：https://blog.csdn.net/Futuregeneratio/article/details/141810506
版权
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
      }
      body {
        background: #ea4335;
      }
      .main {
        width: 800px;
        margin: auto;
        margin-top: 20px;
      }
      .top {
        background: #fff;
        padding: 10px;
      }
      .ipt {
        width: 230px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #ccc;
      }
      .btn {
        height: 34px;
        width: 120px;
        border: none;
      }

      .cart {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      .cart .tr {
        height: 35px;
      }
      .cart .tr div {
        float: left;
        line-height: 35px;
      }
      .cart .tr {
        padding: 5px 0px;
        border-bottom: 1px solid #ccc;
      }
      .cart .tr {
        clear: both;
      }
      .cart .tr div:nth-child(1) {
        width: 20%;
      }
      .cart .tr div:nth-child(2) {
        width: 20%;
      }
      .cart .tr div:nth-child(3) {
        width: 20%;
      }
      .cart .tr div:nth-child(4) {
        width: 30%;
      }
      .cart .tr div:nth-child(5) {
        width: 10%;
      }
      .cart .tr input {
        width: 50px;
      }

      .footer {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      #amount {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="top">
        商品名称：<input type="text" name="" value="" id="title" class="ipt" />
         商品价格：<input type="text" name="" value="" id="price" class="ipt" />
        <input type="button" value="加入购物车" class="btn" id="addcart" />
      </div>
      <div class="cart">
        <div class="tr">
          <div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮</div>
          <div>商品名称</div>
          <div>商品价格</div>
          <div>数量</div>
          <div>操作</div>
        </div>
        <div id="goods">
          <!-- <div class="tr" id="1655771835688">
            <div><input type="checkbox" name="ckboxs" value="1655771835688" /></div>
            <div>鼠标</div>
            <div>100元</div>
            <div>
              <a href="javascript:;" name="-">-</a>
              <input type="text" value="1" readonly="" />
              <a href="javascript:;" name="+">+</a>
            </div>
            <div><a href="javascript:;" name="del">删除</a></div>
          </div> -->
        </div>
      </div>
      <div class="footer">
        总共<span id="count">0</span>件商品,
        共计 <span id="amount">0</span> 元
        <a href="javascript:;" class="r" id="delall">清空购物车</a>
      </div>
    </div>
    <!-- <script src="./购物车（es6）.js"></script> -->
    <!-- <script src="./购物车（es5）.js"></script> -->
    <script src="./购物车es6new.js"></script>
    <!-- <script src="./购物车es5new.js"></script> -->
  </body>
</html>







// 面向数据，通过数据的修改，去改变页面的渲染
let that;
class Car {
  constructor() {
    // 保存this
    that = this;
    // 模拟数据
    this.goodsList = [
      {
        id: 1,
        name: "鼠标",
        price: 100,
        num: 1,
        isChecked: false,
      },
      {
        id: 2,
        name: "电脑",
        price: 10000,
        num: 1,
        isChecked: false,
      },
      {
        id: 3,
        name: "键盘",
        price: 200,
        num: 1,
        isChecked: true,
      },
    ];
    this.goods = document.getElementById("goods");
    this.title = document.getElementById("title");
    this.price = document.getElementById("price");
    this.addcart = document.getElementById("addcart");
    this.selectAll = document.getElementById("selectAll");
    this.countElement = document.getElementById("count");
    this.amountElement = document.getElementById("amount");
    this.delall = document.getElementById("delall");

    //调用渲染回调
    this.render();
    // 调用监听回调
    this.event();
  }
  // 监听函数
  event() {
    this.addcart.addEventListener("click", this.addcartFun);
    this.goods.addEventListener("click", this.goodsFun);
    this.selectAll.addEventListener("click", this.selectAllFun);
    this.delall.addEventListener("click", this.delallFun);
  }
  // 点击商品
  goodsFun(e) {
    switch (e.target.name) {
      case "del":
        that.delFun(e.target);
        break;
      case "+":
        that.addNumFun(e.target);
        break;
      case "-":
        that.reduceNumFun(e.target);
        break;
      case "ckboxs":
        that.ckboxsFun(e.target);
        break;
    }
  }
  // 清空购物车
  delallFun() {
    that.goodsList = [];
    that.render();
  }
  // 计算数量和价格
  countAndAmount() {
    let count = 0;
    let amount = 0;
    for (let i = 0; i < that.goodsList.length; i++) {
      if (that.goodsList[i].isChecked) {
        count += that.goodsList[i].num;
        amount += that.goodsList[i].num * that.goodsList[i].price;
      }
    }
    that.countElement.innerHTML = count;
    that.amountElement.innerHTML = amount;
  }
  // 全选框按钮
  selectAllFun() {
    let selectAllChecked = that.selectAll.checked;
    for (let i = 0; i < that.goodsList.length; i++) {
      that.goodsList[i].isChecked = selectAllChecked;
    }
    // 渲染数据
    that.render();
  }
  // 修改goodList 哪个数据  哪个属性，属性值
  updateGoodList(id, attributeName, attributeValue) {
    that.goodsList.forEach((item) => {
      if (item.id == id) {
        item[attributeName] = attributeValue;
      }
    });
  }

  // 单选框的回调
  ckboxsFun(item) {
    let id = item.parentNode.parentNode.id;
    let itemIsChecked = item.checked;
    that.updateGoodList(id, "isChecked", itemIsChecked);
    // 判断是否要全选
    that.isSelectAllFun();
    that.render();
  }
  // 是否需要全选
  isSelectAllFun() {
    that.selectAll.checked = true;
    for (let i = 0; i < that.goodsList.length; i++) {
      if (!that.goodsList[i].isChecked) {
        that.selectAll.checked = false;
      }
    }
  }

  // -回调
  reduceNumFun(item) {
    let id = item.parentNode.parentNode.id;
    let num = item.nextElementSibling.value;
    if (num > 1) {
      num--;
    }
    that.updateGoodList(id, "num", num);
    // 渲染数据
    that.render();
  }
  // +回调
  addNumFun(item) {
    let id = item.parentNode.parentNode.id;
    let num = item.previousElementSibling.value;
    num++;
    that.updateGoodList(id, "num", num);
    // 渲染数据
    that.render();
  }
  // 删除回调
  delFun(item) {
    let id = item.parentNode.parentNode.id;
    that.goodsList = that.goodsList.filter((item) => {
      return item.id != id;
    });
    //渲染数据
    that.render();
    //判断是否要全选
    that.ckboxsFun(item);
  }
  // 点击添加购物车回调
  addcartFun() {
    let titleValue = that.title.value;
    let priceValue = that.price.value;
    if (titleValue == "" || priceValue == "") {
      return;
    } else if (isNaN(priceValue)) {
      alert("价格必须是数字");
    } else {
      let obj = {
        id: +new Date(),
        name: titleValue,
        price: priceValue,
        num: 1,
        isChecked: true,
      };
      that.goodsList.push(obj);
    }
    // 渲染数据
    that.render();
  }
  // 渲染数据
  render() {
    let str = "";
    for (let i = 0; i < this.goodsList.length; i++) {
      str += `
  <div class="tr" id="${this.goodsList[i].id}">
    <div><input type="checkbox" name="ckboxs" value="${this.goodsList[i].id}" ${this.goodsList[i].isChecked ? "checked" : ""} /></div>
    <div>${this.goodsList[i].name}</div>
    <div>${this.goodsList[i].price}元</div>
    <div>
      <a href="javascript:;" name="-">-</a>
      <input type="text" value="${this.goodsList[i].num}" readonly="" />
      <a href="javascript:;" name="+">+</a>
    </div>
    <div><a href="javascript:;" name="del">删除</a></div>
  </div>
    `;
    }
    this.goods.innerHTML = str;
    // 统计数量和价格
    that.countAndAmount();
  }
}
new Car();