Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 购物车的选择计算功能
Blogger Information
Blog 18
fans 0
comment 2
visits 10453
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
购物车的选择计算功能
go0
Original
394 people have browsed it

购物车的计算功能（没有考虑不勾选物品）

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.       .box {
  10.         width: 22em;
  11.         height: 2em;
  12.       }
  13.       .list > li {
  14.         height: 1.6em;
  15.         background-color: #efefef;
  16.         display: grid;
  17.         grid-template-columns: 3em 3em 3em 3em 3em;
  18.         gap: 1em;
  19.         place-items: center right;
  20.         border-bottom: 1px solid #ccc;
  21.       }
  22.       .list > li:first-of-type {
  23.         background-color: lightseagreen;
  24.         color: white;
  25.       }
  26.       .list > li:hover:not(:first-of-type) {
  27.         cursor: pointer;
  28.         background-color: lightcyan;
  29.       }
  30.       .list > li input[type="number"] {
  31.         width: 3em;
  32.         border: none;
  33.         outline: none;
  34.         text-align: center;
  35.         font-size: 1em;
  36.         background-color: transparent;
  37.       }
  38.       .list > li:last-of-type span.total-num,
  39.       .list > li:last-of-type span.total-amount {
  40.         grid-column: span 2;
  41.         place-self: center right;
  42.         color: lightseagreen;
  43.       }
  44.       .account {
  45.         float: right;
  46.         background-color: lightseagreen;
  47.         color: white;
  48.         border: none;
  49.         outline: none;
  50.         width: 5em;
  51.         height: 2em;
  52.       }
  53.       .account:hover {
  54.         background-color: coral;
  55.         cursor: pointer;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="box">
  61.       <div class="selectAll">
  62.         <input
  63.           type="checkbox"
  64.           class="check-all"
  65.           name="check-all"
  66.           id="check-all"
  67.           onchange="checkAll()"
  68.           checked
  69.         />
  70.         <label for="check-all">全选</label>
  71.       </div>
  73.       <ul class="list">
  74.         <li>
  75.           <span>选择</span> <span>品名</span> <span>数量</span>
  76.           <span>单价</span>
  77.           <span>金额</span>
  78.         </li>
  79.         <li>
  80.           <input type="checkbox" onchange="checkItems()" checked />
  81.           <span class="content">手机</span>
  82.           <input type="number" value="1" min="1" class="num" />
  83.           <span class="price">100</span>
  84.           <span class="amount">0</span>
  85.         </li>
  86.         <li>
  87.           <input type="checkbox" onchange="checkItems()" />
  88.           <span class="content">电脑</span>
  89.           <input type="number" value="2" min="1" class="num" />
  90.           <span class="price">200</span>
  91.           <span class="amount">0</span>
  92.         </li>
  93.         <li>
  94.           <input type="checkbox" onchange="checkItems()" checked />
  95.           <span class="content">相机</span>
  96.           <input type="number" value="3" min="1" class="num" />
  97.           <span class="price">300</span>
  98.           <span class="amount">0</span>
  99.         </li>
  100.         <li>
  101.           <span>总计：</span>
  102.           <span class="total-num">0</span>
  103.           <span class="total-amount">0</span>
  104.         </li>
  105.       </ul>
  106.       <button class="account">结算</button>
  107.     </div>
  109.     <script>
  110.       function checkAll() {
  111.         // console.log(event.target.checked);
  112.         let status = event.target.checked;
  113.         const items = document.querySelectorAll(
  114.           '.list li input[type="checkbox'
  115.         );
  116.         // console.log(items);
  117.         items.forEach((item) => (item.checked = status));
  118.       }
  120.       function checkItems() {
  121.         const items = document.querySelectorAll(
  122.           '.list li input[type="checkbox"]'
  123.         );
  124.         let status = [...items].every((item) => item.checked === true);
  125.         document.querySelector(".check-all").checked = status;
  126.       }
  128.       const nums = document.querySelectorAll(".num");
  129.       //   console.log(nums);
  131.       function getTotalNum(numArr) {
  132.         // console.log("---" + numArr);
  133.         return numArr.reduce((acc, cur) => acc + cur);
  134.       }
  135.       //   console.log(getTotalNum([1, 2, 3]));
  137.       function getAmount(numArr, priceArr) {
  138.         return numArr.map((num, index) => num * priceArr[index]);
  139.       }
  140.       //   console.log(getAmount([1, 2, 3], [100, 200, 300]));
  142.       function getTotalAmount(amountArr) {
  143.         return amountArr.reduce((acc, cur) => acc + cur);
  144.       }
  145.       //   console.log(getTotalAmount([100, 400, 900]));
  147.       function autoCalculate() {
  148.         const numArr = [...nums].map((num) => Number(num.value)); //parseInt
  149.         // console.log(numArr);
  150.         const prices = document.querySelectorAll(".price");
  151.         const priceArr = [...prices].map((price) =>
  152.           parseInt(price.textContent)
  153.         );
  154.         // console.log(priceArr);
  155.         const amountArr = getAmount(numArr, priceArr);
  156.         console.log(amountArr);
  158.         document.querySelector(".total-num").textContent = getTotalNum(numArr);
  159.         document
  160.           .querySelectorAll(".amount")
  161.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  162.         document.querySelector(".total-amount").textContent =
  163.           getTotalAmount(amountArr);
  164.       }
  165.       //   console.log(autoCalculate());
  166.       window.onload = autoCalculate();
  167.       nums.forEach((num) => (num.onchange = autoCalculate));
  168.     </script>
  169.   </body>
  170. </html>

购物车的选择计算功能

思路：不勾选的物品不考虑计算，要多一步拿到所有勾选的物品。除此之外，ul中的第一和最后一个li是不考虑的。

  1. const allLi = document.querySelectorAll(
  2.          ".list li:not(:first-of-type,:last-of-type)"  );

其他的实现有一些比较细节的东西，在源码中体现。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.       .box {
  10.         width: 22em;
  11.         height: 2em;
  12.       }
  13.       .list > li {
  14.         height: 1.6em;
  15.         background-color: #efefef;
  16.         display: grid;
  17.         grid-template-columns: 3em 3em 3em 3em 3em;
  18.         gap: 1em;
  19.         place-items: center right;
  20.         border-bottom: 1px solid #ccc;
  21.       }
  22.       .list > li:first-of-type {
  23.         background-color: lightseagreen;
  24.         color: white;
  25.       }
  26.       .list > li:hover:not(:first-of-type) {
  27.         cursor: pointer;
  28.         background-color: lightcyan;
  29.       }
  30.       .list > li input[type="number"] {
  31.         width: 3em;
  32.         border: none;
  33.         outline: none;
  34.         text-align: center;
  35.         font-size: 1em;
  36.         background-color: transparent;
  37.       }
  38.       .list > li:last-of-type span.total-num,
  39.       .list > li:last-of-type span.total-amount {
  40.         grid-column: span 2;
  41.         place-self: center right;
  42.         color: lightseagreen;
  43.       }
  44.       .account {
  45.         float: right;
  46.         background-color: lightseagreen;
  47.         color: white;
  48.         border: none;
  49.         outline: none;
  50.         width: 5em;
  51.         height: 2em;
  52.       }
  53.       .account:hover {
  54.         background-color: coral;
  55.         cursor: pointer;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="box">
  61.       <div class="selectAll">
  62.         <input
  63.           type="checkbox"
  64.           class="check-all"
  65.           name="check-all"
  66.           id="check-all"
  67.           onchange="checkAll(),autoCalculate()"
  68.           checked
  69.         />
  70.         <label for="check-all">全选</label>
  71.       </div>
  73.       <ul class="list">
  74.         <li>
  75.           <span>选择</span> <span>品名</span> <span>数量</span>
  76.           <span>单价</span>
  77.           <span>金额</span>
  78.         </li>
  79.         <li>
  80.           <input
  81.             type="checkbox"
  82.             onchange="checkItems(),autoCalculate()"
  83.             checked
  84.           />
  85.           <span class="content">手机</span>
  86.           <input type="number" value="1" min="1" class="num" />
  87.           <span class="price">100</span>
  88.           <span class="amount">0</span>
  89.         </li>
  90.         <li>
  91.           <input type="checkbox" onchange="checkItems(),autoCalculate()" />
  92.           <span class="content">电脑</span>
  93.           <input type="number" value="2" min="1" class="num" />
  94.           <span class="price">200</span>
  95.           <span class="amount">0</span>
  96.         </li>
  97.         <li>
  98.           <input
  99.             type="checkbox"
  100.             onchange="checkItems(),autoCalculate()"
  101.             checked
  102.           />
  103.           <span class="content">相机</span>
  104.           <input type="number" value="3" min="1" class="num" />
  105.           <span class="price">300</span>
  106.           <span class="amount">0</span>
  107.         </li>
  108.         <li>
  109.           <span>总计：</span>
  110.           <span class="total-num">0</span>
  111.           <span class="total-amount">0</span>
  112.         </li>
  113.       </ul>
  114.       <button class="account">结算</button>
  115.     </div>
  117.     <script>
  118.       function checkAll() {
  119.         // console.log(event.target.checked);
  120.         let status = event.target.checked;
  121.         const items = document.querySelectorAll(
  122.           '.list li input[type="checkbox'
  123.         );
  124.         // console.log(items);
  125.         items.forEach((item) => (item.checked = status));
  126.       }
  128.       function checkItems() {
  129.         const items = document.querySelectorAll(
  130.           '.list li input[type="checkbox"]'
  131.         );
  132.         let status = [...items].every((item) => item.checked === true);
  133.         document.querySelector(".check-all").checked = status;
  134.       }
  136.       //const nums = document.querySelectorAll(".num");
  137.       //   console.log(nums);
  139.       ///////////////////
  140.       // let nums = [];
  141.       // let prices = [];
  142.       // const allLi = document.querySelectorAll(
  143.       //   ".list li:not(:first-of-type,:last-of-type)"
  144.       // );
  145.       // console.log(allLi);
  146.       // allLi.forEach((li, index) => {
  147.       //   // console.log(li.querySelector("input:first-of-type").checked, index);
  148.       //   if (li.querySelector("input:first-of-type").checked === true) {
  149.       //     nums.push(Number(li.querySelector(".num").value));
  150.       //     prices.push(Number(li.querySelector(".price").textContent));
  151.       //   }
  152.       // });
  153.       // console.log("---" + nums + prices);
  154.       //////////////////
  156.       function getTotalNum(numArr) {
  157.         // console.log("---" + numArr);
  158.         return numArr.reduce((acc, cur) => acc + cur);
  159.       }
  160.       //   console.log(getTotalNum([1, 2, 3]));
  162.       function getAmount(numArr, priceArr) {
  163.         return numArr.map((num, index) => num * priceArr[index]);
  164.       }
  165.       //   console.log(getAmount([1, 2, 3], [100, 200, 300]));
  167.       function getTotalAmount(amountArr) {
  168.         return amountArr.reduce((acc, cur) => acc + cur);
  169.       }
  170.       //   console.log(getTotalAmount([100, 400, 900]));
  172.       function autoCalculate() {
  173.         let nums = [];
  174.         let prices = [];
  175.         const allLi = document.querySelectorAll(
  176.           ".list li:not(:first-of-type,:last-of-type)"
  177.         );
  178.         console.log(allLi);
  179.         allLi.forEach((li, index) => {
  180.           // console.log(li.querySelector("input:first-of-type").checked, index);
  181.           if (li.querySelector("input:first-of-type").checked === true) {
  182.             nums.push(Number(li.querySelector(".num").value));
  183.             prices.push(Number(li.querySelector(".price").textContent));
  184.           }
  185.         });
  187.         const numArr = nums;
  188.         // console.log(numArr);
  190.         const priceArr = prices;
  191.         // console.log(priceArr);
  192.         const amountArr = getAmount(numArr, priceArr);
  194.         document.querySelector(".total-num").textContent = getTotalNum(numArr);
  195.         // document.querySelectorAll(".amount").forEach((amount, index) => (amount.textContent = amountArr[index]));
  196.         let index2 = 0;
  198.         document.querySelectorAll(".amount").forEach((amount) => {
  199.           if (
  200.             amount.parentElement.querySelector("input:first-of-type")
  201.               .checked === true
  202.           ) {
  203.             amount.textContent = amountArr[index2];
  204.             index2 = index2 + 1;
  205.           }
  206.         });
  208.         document.querySelector(".total-amount").textContent =
  209.           getTotalAmount(amountArr);
  210.       }
  211.       //   console.log(autoCalculate());
  212.       window.onload = autoCalculate();
  213.       const allNum = document.querySelectorAll(".num");
  214.       [...allNum].forEach((num) => (num.onchange = autoCalculate));
  215.     </script>
  216.   </body>
  217. </html>

Correcting teacher：PHPzPHPz

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