Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0114 购物车计算金额
Blogger Information
Blog 15
fans 0
comment 0
visits 9226
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0114 购物车计算金额
fanyigle_php
Original
612 people have browsed it

以老师写的dom为基础,用js原生函数写的,后面在写jQuery
变化因子包括全选\反选,单品选中\反选,数量的改变(同时检查它自己的复选框是否被选中)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>购物车自动计算</title>
  7.     <link rel="stylesheet" href="style.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <!-- 全选复选框 -->
  17.           <th>
  18.             <input
  19.               type="checkbox"
  20.               name="checkAll"
  21.               id="check-all"
  22.               checked
  23.             /><label for="check-all">全选</label>
  24.           </th>
  25.           <th>图片</th>
  26.           <th>品名</th>
  27.           <th>单位</th>
  28.           <th>单价/元</th>
  29.           <th>数量</th>
  30.           <th>金额/元</th>
  31.         </tr>
  32.       </thead>
  33.       <tbody>
  34.         <tr>
  35.           <td>
  36.             <input type="checkbox" name="item" value="SN-1020" checked />
  37.           </td>
  38.           <td>
  39.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  40.           </td>
  41.           <td>iPhone 11</td>
  42.           <td>台</td>
  43.           <td class="price">4799</td>
  44.           <td><input type="number" min="1" value="1" /></td>
  45.           <td class="amount">xxxx</td>
  46.         </tr>
  47.         <tr>
  48.           <td>
  49.             <input type="checkbox" name="item" value="SN-1020" checked />
  50.           </td>
  51.           <td>
  52.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  53.           </td>
  54.           <td>小米pro 11</td>
  55.           <td>部</td>
  56.           <td class="price">3999</td>
  57.           <td><input type="number" min="1" value="2" /></td>
  58.           <td class="amount">xxxx</td>
  59.         </tr>
  60.         <tr>
  61.           <td>
  62.             <input type="checkbox" name="item" value="SN-1030" checked />
  63.           </td>
  64.           <td>
  65.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  66.           </td>
  67.           <td>MacBook Pro</td>
  68.           <td>台</td>
  69.           <td class="price">18999</td>
  70.           <td><input type="number" min="1" value="1" /></td>
  71.           <td class="amount">xxxx</td>
  72.         </tr>
  73.         <tr>
  74.           <td>
  75.             <input type="checkbox" name="item" value="SN-1040" checked />
  76.           </td>
  77.           <td>
  78.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  79.           </td>
  80.           <td>小米75电视</td>
  81.           <td>台</td>
  82.           <td class="price">5999</td>
  83.           <td><input type="number" min="1" value="2" /></td>
  84.           <td class="amount">xxxx</td>
  85.         </tr>
  86.         <tr>
  87.           <td>
  88.             <input type="checkbox" name="item" value="SN-1050" checked />
  89.           </td>
  90.           <td>
  91.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  92.           </td>
  93.           <td>Canon 90D单反</td>
  94.           <td>台</td>
  95.           <td class="price">9699</td>
  96.           <td><input type="number" min="1" value="1" /></td>
  97.           <td class="amount">xxxx</td>
  98.         </tr>
  99.       </tbody>
  100.       <tfoot>
  101.         <tr style="font-weight: bolder; font-size: 1.2em">
  102.           <td colspan="5">总计:</td>
  103.           <td id="sum">xxxx</td>
  104.           <td id="total-amount">xxxx</td>
  105.         </tr>
  106.       </tfoot>
  107.     </table>
  108.     <div style="width: 90%; margin: 10px auto">
  109.       <button style="float: right; width: 100px">结算</button>
  110.     </div>
  112.     <script>
  113.       // 1. 获取全选复选框,所有独立商品的复选框
  114.       const checkAll = document.querySelector("#check-all");
  115.       const checkItems = document.getElementsByName("item");
  116.       // 2. 为全选复选框添加事件: change,当值改变会触发
  117.       // console.log(ev.target.checked); // 看当前全选的状态
  118.       checkAll.onchange = (ev) =>
  119.         checkItems.forEach((item) => (item.checked = ev.target.checked));
  121.       // 3. 为每个单独的商品复选框添加change
  122.       checkItems.forEach(
  123.         (item) =>
  124.           (item.onchange = () => {
  125.             checkAll.checked = [...checkItems].every((item) => item.checked);
  126.             //autoCalculate();
  127.           })
  128.       );
  129.       // =====================================================
  131.       // 获取所有的数量控件
  132.       const numInput = document.querySelectorAll('tbody input[type="number"');
  133.       // // 用户更新数量时触发自动计算
  134.       // numInput.forEach((input) => {
  135.       //   //单独onchange?
  136.       //   input.onchange = autoCalculate;
  137.       // });
  138.       // 购物车刚加载完成时也应该触发自动计算
  139.       window.onload = autoCalculate;
  140.       //表格change触发
  141.       const myTable = document.querySelector("table");
  142.       myTable.onchange = autoCalculate;
  144.       // 封装一个自动计算的函数
  145.       function autoCalculate() {
  146.         // 获取单价组成的数组
  147.         const prices = document.querySelectorAll("tbody .price");
  148.         const priceArr = [...prices].map((item) => item.textContent * 1);
  149.         console.log(priceArr);
  151.         // 获取数量组成的数组
  152.         const numbers = document.querySelectorAll("tbody input[type=number]");
  153.         let numArr = [...numbers].map((item) => item.value * 1);
  154.         console.log(numArr);
  156.         // 计算每件商品金额, 单价 * 数量
  157.         let amountArr = [priceArr, numArr].reduce((total, curr) =>
  158.           total.map((item, index) => item * curr[index])
  159.         );
  160.         console.log(amountArr);
  162.         // 每个商品的金额写到页面上
  163.         document
  164.           .querySelectorAll(".amount")
  165.           .forEach((item, index) => (item.textContent = amountArr[index]));
  167.         // ---------------------------------
  168.         // 商品总数
  169.         // 用filter过滤出选中的商品
  170.         numArr = numArr.filter((item, index) => {
  171.           // console.log(checkItems[index].checked);
  172.           return checkItems[index].checked;
  173.         });
  175.         let sum = numArr.length ? numArr.reduce((pre, cur) => pre + cur) : 0;
  177.         // 计算总金额
  178.         // 用filter过滤出选中的商品
  179.         amountArr = amountArr.filter((item, index) => {
  180.           // console.log(checkItems[index].checked);
  181.           return checkItems[index].checked;
  182.         });
  183.         let totalAmount = amountArr.length
  184.           ? amountArr.reduce((pre, cur) => pre + cur)
  185.           : 0;
  186.         console.log(totalAmount);
  187.         // 将计算结果渲染到购物车中
  188.         // 总数量
  189.         document.querySelector("#sum").textContent = sum;
  190.         // 总金额
  191.         document.querySelector("#total-amount").textContent = totalAmount;
  192.       }
  193.     </script>
  194.   </body>
  195. </html>
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