ASCII码 ASCII码

购物车的选择计算功能

发布于：2022-01-19 10:29:46  栏目：技术文档

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

  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>

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行