购物车功能

<!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;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0319作业

2021-03-25 12:01:48