购物车JS代码 - 第20期培训-大前端

首页 > 博客列表 > 购物车JS代码
博主信息
博文 37
粉丝 0
访问量 22305
专题推荐
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
购物车JS代码
秋闲独醉
原创
616人浏览过
<!DOCTYPE html>
<html lang="zh-CN">
  <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>实战3-购物车</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <!-- 1. 全选按钮 -->
      <div class="selectAll">
        <!-- change: 当它的值发生改变时触发 -->
        <!-- checked: 当前是选中状态, 布尔属性 -->
        <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
        <label for="check-all">全选</label>
      </div>
      <!-- 2. 商品列表 -->
      <ul class="list">
        <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
        <li>
          <input type="checkbox" onchange="checkItems()" checked />
          <span class="content">手机</span>
          <input type="number" value="1" min="1" class="num" />
          <span class="price">100</span>
          <span class="amount">0</span>
        </li>
        <li>
          <input type="checkbox" onchange="checkItems()" checked />
          <span class="content">电脑</span>
          <input type="number" value="2" min="1" class="num" />
          <span class="price">200</span><span class="amount">0</span>
        </li>
        <li>
          <input type="checkbox" onchange="checkItems()" checked />
          <span class="content">相机</span>
          <input type="number" value="3" min="1" class="num" />
          <span class="price">300</span>
          <span class="amount">0</span>
        </li>
        <li>
          <span>总计:</span>
          <span class="total-num">0</span>
          <span class="total-amount">0</span>
        </li>
      </ul>
      <!-- 3. 结算按钮 -->
      <button class="account">结算</button>
    </div>
    <script>
      // 1. 选做: 购物车选择或不选商品时,并自动过滤未选商品,自动计算
      // (一) 全选的自动设置
      // 1. 全选
      function checkAll() {
        // 第1步: 获取当前按钮的状态
        let status = event.target.checked;
        // 第2步: 根据当前状态,来动态的设置其它所有商品的选中状态
        const items = document.querySelectorAll('.list li input[type="checkbox"]');
        // console.log(items);
        items.forEach((item) => (item.checked = status));
        // document
        //   .querySelectorAll('.list li input[type="checkbox"]')
        //   .forEach(item => (item.checked = event.target.checked));
        //勾选重新算
        chageCalculate();
      }
      // 2. 根据用户的选择来动态的设置"全选"按钮的状态
      // 第1步: 获取全部的商品
      const items = document.querySelectorAll('.list li input[type="checkbox"]');
      function checkItems() {
        // 第2步: 判断当前状态, 只有全部选中, 才返回 true,否则就返回false
        // console.log([...items]);
        // console.log(Array.from(items));
        let status = [...items].every((item) => item.checked === true);
        // console.log(status);
        // 第3步: 用这个状态来更新全选按钮
        document.querySelector(".check-all").checked = status;
      }
      //   (二) 商品的自动计算
      // 获取所有商品数量的元素
      const nums = document.querySelectorAll(".list .num");
      // 1. 计算商品总数
      function getTotalNum(numArr) {
        return numArr.reduce((acc, cur) => acc + cur);
      }
      //   let numArr = [...nums].map(item => parseInt(item.value));
      //   console.log(getTotalNum(numArr));
      // 2. 计算每个商品的金额: 数量 * 单价
      // numArr: 数量数组, priceArr: 单价数组
      function getAmount(numArr, priceArr) {
        // 用map(), 不用forEach? 因为map有返回值
        return numArr.map((num, index) => {
          //   console.log(num, index);
          // 以index为索引条件在priceArr中进行查询获取与数量对应的单价
          return num * priceArr[index];
        });
      }
      //   console.log(getAmount([1, 2, 3], [100, 200, 300]));
      // 3. 计算总金额
      function getTotalAmount(amountArr) {
        return amountArr.reduce((acc, cur) => acc + cur);
      }
      //   console.log(getTotalAmount(getAmount([1, 2, 3], [100, 200, 300])));
      //   自动计算的通用方法
      function autoCalculate() {
        // 单价数组
        const prices = document.querySelectorAll(".list .price");
        let priceArr = [...prices].map((item) => parseInt(item.textContent));
        // 数量数组
        let numArr = [...nums].map((item) => parseInt(item.value));
        // 金额数组: 数量数组 * 单价数组
        const amountArr = getAmount(numArr, priceArr);
        // console.log(amountArr);
        // 将以上数量添加到页面
        // 1. 将总数量添加到页面
        document.querySelector(".total-num").textContent = getTotalNum(numArr);
        // 2. 将每个商品的金额填充
        document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
        // 3. 填充总金额
        document.querySelector(".total-amount").textContent = getTotalAmount(amountArr);
      }
      //勾选改变
      function chageCalculate() {
        //如果都为空，则清空数据
        let res = [...items].some((item, index) => item.checked);
        if (!res) {
          // 1. 将总数量添加到页面
          document.querySelector(".total-num").textContent = 0;
          // 2. 将每个商品的金额填充
          //   document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = 0));
          // 3. 填充总金额
          document.querySelector(".total-amount").textContent = 0;
          return false;
        }
        console.log(res);
        // 单价数组
        const prices = document.querySelectorAll(".list .price");
        let priceArr = [...prices].map((item) => parseInt(item.textContent));
        // 数量数组
        let numArr = [...nums].map((item) => parseInt(item.value));
        //勾选的数量
        numArr = numArr.filter(function (item, index) {
          return items[index].checked;
        });
        //勾选的商品金额
        priceArr = priceArr.filter((item, index) => [...items][index].checked);
        console.log(numArr, priceArr);
        // 金额数组: 数量数组 * 单价数组
        const amountArr = getAmount(numArr, priceArr);
        // console.log(amountArr);
        // 将以上数量添加到页面
        // 1. 将总数量添加到页面
        document.querySelector(".total-num").textContent = getTotalNum(numArr);
        // 2. 将每个商品的金额填充
        let amount = document.querySelectorAll(".amount");
        console.log(amount);
        amount = [...amount].map((item) => parseInt(item.textContent));
        console.log(amount);
        amount = amount.filter((item, index) => [...items][index].checked);
        console.log(amount);
        amount.forEach((item, index) => (item.textContent = amountArr[index]));
        // 3. 填充总金额
        document.querySelector(".total-amount").textContent = getTotalAmount(amountArr);
      }
      // 当页面加载时,根据默认值进行自动计算
      //   window.addEventListener('load', autoCalculate, false);
      window.onload = autoCalculate;
      // 当用户更新商品数量时, 将会触发商品金额,总数量,和总金额的动态更新
      console.log(nums);
      nums.forEach((item) => (item.onchange = autoCalculate));
      items.forEach((item) => (item.onchange = chageCalculate));
    </script>
    <script>
      // 2. 实例演示JSON常用的二个API, 并详细描述前后端交互的原理与JSON的优势s
      //   JSON.stringify() 对js对象进行json数据格式化
      let obj = {
        1: "2",
        8: "dd",
        d: "mo",
        88: [2, 3, 46, 71, 9],
      };
      console.log(JSON.stringify(obj));
      //JSON.parse(),对json数据转为js对象
      let res = JSON.parse(JSON.stringify(obj));
      console.log(res);
      //前后端都是按照json格式编码和解码，只是不同的端的api接口不一样，但是json字符串格式是一样的，有利于json字符串的在不同平台被识别和解码。
    </script>
  </body>
</html>
批改老师：
PHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
Markdown语法和emmet语法

2022-07-02 10:20:44