购物车功能

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>购物车的全选操作</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <table>
  12.       <caption>购物车</caption>
  13.       <thead>
  14.         <tr>
  15.           <!-- 全选复选框 -->
  16.           <th>
  17.             <input type="checkbox" name="checkAll" id="check-all" />
  18.             <label for="check-all">全选</label>
  19.           </th>
  20.           <th>图片</th>
  21.           <th>品名</th>
  22.           <th>单位</th>
  23.           <th>单价/元</th>
  24.           <th>数量</th>
  25.           <th>金额/元</th>
  26.         </tr>
  27.       </thead>
  28.       <tbody>
  29.         <tr>
  30.           <td>
  31.             <input type="checkbox" name="item" value="SN-1020" data-index="0" />
  32.           </td>
  33.           <td>
  34.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  35.           </td>
  36.           <td>iPhone 11</td>
  37.           <td>台</td>
  38.           <td class="price">4799</td>
  39.           <td><input type="number" min="1" value="1" /></td>
  40.           <td class="amount">0</td>
  41.         </tr>
  42.         <tr>
  43.           <td>
  44.             <input type="checkbox" name="item" value="SN-1020" data-index="1" />
  45.           </td>
  46.           <td>
  47.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  48.           </td>
  49.           <td>小米pro 11</td>
  50.           <td>部</td>
  51.           <td class="price">3999</td>
  52.           <td><input type="number" min="1" value="2" /></td>
  53.           <td class="amount">0</td>
  54.         </tr>
  55.         <tr>
  56.           <td>
  57.             <input type="checkbox" name="item" value="SN-1030" data-index="2" />
  58.           </td>
  59.           <td>
  60.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  61.           </td>
  62.           <td>MacBook Pro</td>
  63.           <td>台</td>
  64.           <td class="price">18999</td>
  65.           <td><input type="number" min="1" value="1" /></td>
  66.           <td class="amount">0</td>
  67.         </tr>
  68.         <tr>
  69.           <td>
  70.             <input type="checkbox" name="item" value="SN-1040" data-index="3" />
  71.           </td>
  72.           <td>
  73.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  74.           </td>
  75.           <td>小米75电视</td>
  76.           <td>台</td>
  77.           <td class="price">5999</td>
  78.           <td><input type="number" min="1" value="2" /></td>
  79.           <td class="amount">0</td>
  80.         </tr>
  81.         <tr>
  82.           <td>
  83.             <input type="checkbox" name="item" value="SN-1050" data-index="4" />
  84.           </td>
  85.           <td>
  86.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  87.           </td>
  88.           <td>Canon 90D单反</td>
  89.           <td>台</td>
  90.           <td class="price">9699</td>
  91.           <td><input type="number" min="1" value="1" /></td>
  92.           <td class="amount">0</td>
  93.         </tr>
  94.       </tbody>
  95.       <tfoot>
  96.         <tr style="font-weight: bolder; font-size: 1.2em">
  97.           <td colspan="5">总计:</td>
  98.           <td id="sum">0</td>
  99.           <td id="total-amount">0</td>
  100.         </tr>
  101.       </tfoot>
  102.     </table>
  103.     <div style="width: 90%; margin: 10px auto">
  104.       <button style="float: right; width: 100px">结算</button>
  105.     </div>
  106.     <script>
  107.       // 获取全选按钮，每个独立的商品复选框
  108.       const checkAll = document.querySelector("#check-all");
  109.       const checkItems = document.getElementsByName("item");
  111.       // 将当前全选的状态变化赋值给每个商品
  112.       checkAll.onchange = (ev) => {
  113.         checkItems.forEach((item) => (item.checked = ev.target.checked));
  114.         if (ev.target.checked) {
  115.           totallPrices(checkedArr());
  116.         } else {
  117.           clearCalculate();
  118.         }
  119.       };
  121.       // 为每个单独的商品复选框添加 change
  122.       checkItems.forEach(
  123.         (item) =>
  124.           (item.onchange = () => {
  125.             checkAll.checked = [...checkItems].every((item, index) => item.checked);
  126.             totallPrices(checkedArr());
  127.           })
  128.       );
  130.       // 获取数量 input 元素
  131.       const numInput = document.querySelectorAll('tbody input[type="number"]');
  132.       // 用户更新数量时自动计算
  133.       numInput.forEach((input) => (input.onchange = goodPrice));
  134.       // 页面加载完成后自动计算单个商品的总价
  135.       window.onload = goodPrice();
  137.       // 获取被选中的复选框数组
  138.       function checkedArr() {
  139.         var id = document.getElementsByName("item");
  140.         var value = [];
  141.         for (var i = 0; i < id.length; i++) {
  142.           if (id[i].checked) {
  143.             value.push(id[i].dataset.index);
  144.           }
  145.         }
  146.         return { goodIndex: value, totallType: id.length };
  147.       }
  149.       // 计算单个商品的总价
  150.       function goodPrice() {
  151.         // 价格数组
  152.         const prices = document.querySelectorAll("tbody .price");
  153.         const priceArr = [...prices].map((price) => price.textContent * 1);
  155.         // 数量数组
  156.         const numbers = document.querySelectorAll("tbody input[type='number']");
  157.         const numArr = [...numbers].map((num) => num.value * 1);
  159.         // 计算金额：数量 * 单价 = 金额
  160.         const amountArr = [priceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  161.         // 将每个商品的金额渲染到页面
  162.         document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
  163.       }
  165.       // 计算选中总价和总数
  166.       function totallPrices(checkItemsArr) {
  167.         console.log(checkItemsArr);
  168.         // 如果为空数组时，数量和总价改为 0
  169.         if (checkItemsArr["goodIndex"].length <= 0) {
  170.           clearCalculate();
  171.           return;
  172.         }
  174.         const prices = document.querySelectorAll("tbody .price");
  175.         const numbers = document.querySelectorAll("tbody input[type='number']");
  177.         // 价格数组
  178.         let priceArr = [...prices].map((price) => price.textContent * 1);
  179.         // 数量数组
  180.         let numArr = [...numbers].map((num) => num.value * 1);
  182.         // 获取选中的商品数量和数组
  183.         // 程序目前报错。。。。。。。。。
  184.         // if (checkItemsArr["goodIndex"].length <= checkItemsArr["totallType"]) {
  185.         //   let nowPriceArr, nowNumArr;
  186.         //   for (i = 0; i < checkItemsArr["goodIndex"].length; i++) {
  187.         //     index = Number(checkItemsArr["goodIndex"][i]);
  188.         //     nowPriceArr[i] = priceArr[i];
  189.         //     nowNumArr[i] = numArr[index];
  190.         //   }
  191.         //   priceArr = nowPriceArr;
  192.         //   numArr = nowNumArr;
  193.         // }
  195.         // 商品总数
  196.         let sum = numArr.reduce((pre, cur) => pre + cur);
  198.         // 计算金额：数量 * 单价 = 金额
  199.         const amountArr = [priceArr, numArr].reduce((total, curr) => total.map((item, index) => item * curr[index]));
  201.         // 将总数量渲染到页面
  202.         document.querySelector("#sum").textContent = String(sum);
  203.         // 将总金额渲染到页面
  204.         document.querySelector("#total-amount").textContent = String(amountArr.reduce((pre, curr) => pre + curr));
  205.       }
  207.       // 如果没有选择商品，商品数量和单价为零
  208.       function clearCalculate() {
  209.         // 将总数量渲染到页面
  210.         document.querySelector("#sum").textContent = "0";
  211.         // 将总金额渲染到页面
  212.         document.querySelector("#total-amount").textContent = "0";
  213.       }
  214.     </script>
  215.   </body>
  216. </html>

css 样式：

  1. table {
  2.   border-collapse: collapse;
  3.   width: 90%;
  4.   text-align: center;
  5.   margin: auto;
  6. }
  8. table caption {
  9.   margin-bottom: 15px;
  10.   font-size: 1.5rem;
  11. }
  13. table th,
  14. table td {
  15.   border-bottom: 1px solid #ccc;
  16.   padding: 5px;
  17.   font-weight: normal;
  18. }
  20. table thead tr:first-of-type {
  21.   background-color: #e6e6e6;
  22.   height: 3em;
  23. }
  25. table input[type="checkbox"] {
  26.   width: 1.5em;
  27.   height: 1.5em;
  28. }
  30. table tbody tr {
  31.   border-bottom: 1px solid #ccc;
  32. }
  33. table tbody tr:hover {
  34.   background-color: #f6f6f6;
  35.   cursor: pointer;
  36. }
  38. tbody img {
  39.   width: 3em;
  40. }
  41. tbody input[type="number"] {
  42.   width: 3em;
  43. }
  45. button {
  46.   width: 150px;
  47.   height: 30px;
  48.   outline: none;
  49.   border: none;
  50.   background-color: teal;
  51.   color: white;
  52.   letter-spacing: 5px;
  53. }
  54. button:hover {
  55.   opacity: 0.7;
  56.   cursor: pointer;
  57. }

更多相关文章

  1. 0415作业-Vue常用指令及方法
  2. 为留言板添加字数实时统计与禁止超出功能; 2. 自选一些字符串和
  3. 留言板，字符串和数组方法 ----0407
  4. js之购物车自动计算
  5. 当面试官问我ArrayList和LinkedList哪个更占空间时，我这么答让他
  6. 悟透前端：javascript数组之includes、reduce
  7. JavaScript数组扁平化的黑科技
  8. 第14部分- Linux ARM汇编数组/结构体/索引
  9. C语言指针全归纳-初级版

随机推荐

  1. 开开心心爬APP，结果一坑连一坑
  2. nginx跳转 去掉工程名
  3. #6.1# 用python画出你的童年回忆
  4. centos7 中yum不能用了
  5. 看了我做的年度报表，老板大呼NB！
  6. 摆摊吧，后浪
  7. 用python爬取4332条粽子数据进行分析
  8. 一个公式三指标，电商分析的破局之道
  9. Python爬取 201865 条《隐秘的角落》弹幕
  10. LeetCode第 146 号问题： LRU 缓存机制