购物车功能

<!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>购物车的全选操作</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <table>
      <caption>购物车</caption>
      <thead>
        <tr>
          <!-- 全选复选框 -->
          <th>
            <input type="checkbox" name="checkAll" id="check-all" />
            <label for="check-all">全选</label>
          </th>
          <th>图片</th>
          <th>品名</th>
          <th>单位</th>
          <th>单价/元</th>
          <th>数量</th>
          <th>金额/元</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="item" value="SN-1020" data-index="0" />
          </td>
          <td>
            <a href=""><img src="images/p1.jpg" alt="" /></a>
          </td>
          <td>iPhone 11</td>
          <td>台</td>
          <td class="price">4799</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" value="SN-1020" data-index="1" />
          </td>
          <td>
            <a href=""><img src="images/p2.jpg" alt="" /></a>
          </td>
          <td>小米pro 11</td>
          <td>部</td>
          <td class="price">3999</td>
          <td><input type="number" min="1" value="2" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" value="SN-1030" data-index="2" />
          </td>
          <td>
            <a href=""><img src="images/p3.jpg" alt="" /></a>
          </td>
          <td>MacBook Pro</td>
          <td>台</td>
          <td class="price">18999</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" value="SN-1040" data-index="3" />
          </td>
          <td>
            <a href=""><img src="images/p4.jpg" alt="" /></a>
          </td>
          <td>小米75电视</td>
          <td>台</td>
          <td class="price">5999</td>
          <td><input type="number" min="1" value="2" /></td>
          <td class="amount">0</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="item" value="SN-1050" data-index="4" />
          </td>
          <td>
            <a href=""><img src="images/p5.jpg" alt="" /></a>
          </td>
          <td>Canon 90D单反</td>
          <td>台</td>
          <td class="price">9699</td>
          <td><input type="number" min="1" value="1" /></td>
          <td class="amount">0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr style="font-weight: bolder; font-size: 1.2em">
          <td colspan="5">总计:</td>
          <td id="sum">0</td>
          <td id="total-amount">0</td>
        </tr>
      </tfoot>
    </table>
    <div style="width: 90%; margin: 10px auto">
      <button style="float: right; width: 100px">结算</button>
    </div>
    <script>
      // 获取全选按钮，每个独立的商品复选框
      const checkAll = document.querySelector("#check-all");
      const checkItems = document.getElementsByName("item");
      // 将当前全选的状态变化赋值给每个商品
      checkAll.onchange = (ev) => {
        checkItems.forEach((item) => (item.checked = ev.target.checked));
        if (ev.target.checked) {
          totallPrices(checkedArr());
        } else {
          clearCalculate();
        }
      };
      // 为每个单独的商品复选框添加 change
      checkItems.forEach(
        (item) =>
          (item.onchange = () => {
            checkAll.checked = [...checkItems].every((item, index) => item.checked);
            totallPrices(checkedArr());
          })
      );
      // 获取数量 input 元素
      const numInput = document.querySelectorAll('tbody input[type="number"]');
      // 用户更新数量时自动计算
      numInput.forEach((input) => (input.onchange = goodPrice));
      // 页面加载完成后自动计算单个商品的总价
      window.onload = goodPrice();
      // 获取被选中的复选框数组
      function checkedArr() {
        var id = document.getElementsByName("item");
        var value = [];
        for (var i = 0; i < id.length; i++) {
          if (id[i].checked) {
            value.push(id[i].dataset.index);
          }
        }
        return { goodIndex: value, totallType: id.length };
      }
      // 计算单个商品的总价
      function goodPrice() {
        // 价格数组
        const prices = document.querySelectorAll("tbody .price");
        const priceArr = [...prices].map((price) => price.textContent * 1);
        // 数量数组
        const numbers = document.querySelectorAll("tbody input[type='number']");
        const numArr = [...numbers].map((num) => num.value * 1);
        // 计算金额：数量 * 单价 = 金额
        const amountArr = [priceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
        // 将每个商品的金额渲染到页面
        document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
      }
      // 计算选中总价和总数
      function totallPrices(checkItemsArr) {
        console.log(checkItemsArr);
        // 如果为空数组时，数量和总价改为 0
        if (checkItemsArr["goodIndex"].length <= 0) {
          clearCalculate();
          return;
        }
        const prices = document.querySelectorAll("tbody .price");
        const numbers = document.querySelectorAll("tbody input[type='number']");
        // 价格数组
        let priceArr = [...prices].map((price) => price.textContent * 1);
        // 数量数组
        let numArr = [...numbers].map((num) => num.value * 1);
        // 获取选中的商品数量和数组
        // 程序目前报错。。。。。。。。。
        // if (checkItemsArr["goodIndex"].length <= checkItemsArr["totallType"]) {
        //   let nowPriceArr, nowNumArr;
        //   for (i = 0; i < checkItemsArr["goodIndex"].length; i++) {
        //     index = Number(checkItemsArr["goodIndex"][i]);
        //     nowPriceArr[i] = priceArr[i];
        //     nowNumArr[i] = numArr[index];
        //   }
        //   priceArr = nowPriceArr;
        //   numArr = nowNumArr;
        // }
        // 商品总数
        let sum = numArr.reduce((pre, cur) => pre + cur);
        // 计算金额：数量 * 单价 = 金额
        const amountArr = [priceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
        // 将总数量渲染到页面
        document.querySelector("#sum").textContent = String(sum);
        // 将总金额渲染到页面
        document.querySelector("#total-amount").textContent = String(amountArr.reduce((pre, curr) => pre + curr));
      }
      // 如果没有选择商品，商品数量和单价为零
      function clearCalculate() {
        // 将总数量渲染到页面
        document.querySelector("#sum").textContent = "0";
        // 将总金额渲染到页面
        document.querySelector("#total-amount").textContent = "0";
      }
    </script>
  </body>
</html>

css 样式：

table {
  border-collapse: collapse;
  width: 90%;
  text-align: center;
  margin: auto;
}
table caption {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
table th,
table td {
  border-bottom: 1px solid #ccc;
  padding: 5px;
  font-weight: normal;
}
table thead tr:first-of-type {
  background-color: #e6e6e6;
  height: 3em;
}
table input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
}
table tbody tr {
  border-bottom: 1px solid #ccc;
}
table tbody tr:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
tbody img {
  width: 3em;
}
tbody input[type="number"] {
  width: 3em;
}
button {
  width: 150px;
  height: 30px;
  outline: none;
  border: none;
  background-color: teal;
  color: white;
  letter-spacing: 5px;
}
button:hover {
  opacity: 0.7;
  cursor: pointer;
}

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0319作业

2021-03-25 12:01:48