ASCII码 ASCII码

购物车实例演示

发布于：2022-04-14 13:25:45  栏目：技术文档

代码：

  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>购物车-2</title>
  8.     <link rel="stylesheet" href="css/demo3.css">
  9. </head>
  10. <body>
  11.     <div class="box">
  12.         <!-- 全选框 -->
  13.         <div class="selectAll">
  14.             <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked>
  15.             <label for="check-all">全选</label>
  16.         </div>
  17.         <!-- 商品列表 -->
  18.         <ul class="list">
  19.             <li>
  20.                 <span>选择</span>
  21.                 <span>品名</span>
  22.                 <span>数量</span>
  23.                 <span>单价</span>
  24.                 <span>金额</span>
  25.              </li>
  26.             <li>
  27.                 <input type="checkbox" onchange="checkItems()" checked>
  28.                 <span class="content">吹风机</span>
  29.                 <input type="number" value="1" min="1" class="num">
  30.                 <span class="price">100</span>
  31.                 <span class="amount">0</span>
  32.             </li>
  33.             <li>
  34.                 <input type="checkbox" onchange="checkItems()" checked>
  35.                 <span class="content">电脑</span>
  36.                 <input type="number" value="2" min="1" class="num">
  37.                 <span class="price">2000</span>
  38.                 <span class="amount">0</span>
  39.             </li>
  40.             <li>
  41.                 <input type="checkbox" onchange="checkItems()" checked>
  42.                 <span class="content">相机</span>
  43.                 <input type="number" value="3" min="1" class="num">
  44.                 <span class="price">1500</span>
  45.                 <span class="amount">0</span>
  46.             </li>
  47.             <li>
  48.                 <span>总计:</span>
  49.                 <span class="total-num">0</span>
  50.                 <span class="total-amount">0</span>
  51.             </li>
  52.         </ul>
  53.         <button class="account">结算</button>
  54.     </div>
  56.     <script>
  57.         //全选
  58.         function checkAll() {
  59.             let status=event.target.checked;
  60.             console.log(status);
  62.         //子商品状态
  63.         document
  64.             .querySelectorAll(".list li input[type='checkbox']")
  65.             .forEach((item)=>(item.checked=status));
  66.         autoCalculate();
  67.         }
  68.         function checkItems() {
  69.             //全部商品
  70.             let items = document.querySelectorAll(".list li input[type='checkbox']");
  71.             //判断状态
  72.             let status=[...items].every((item)=>item.checked===true);
  73.             console.log(status);
  74.             document.querySelector('.check-all').checked=status;
  75.             autoCalculate();
  76.         }
  77.         const nums=document.querySelectorAll('.num');
  78.         // console.log(nums);
  79.         //商品是否被选中
  80.         function goodStatus(numArr){
  81.             let items =document.querySelectorAll(".list li input[type='checkbox']");
  82.             return numArr.map((num,index)=>{
  83.                 if (items[index].checked===false){
  84.                     return (num=0);
  85.                 } else {
  86.                     return num;
  87.                 }
  88.             });
  89.         }
  91.         //计算总数量
  92.         function getTotalNum(numArr) {
  93.             numArr=goodStatus(numArr);
  94.             return numArr.reduce((acc, cur)=>acc+cur);
  95.         }
  96.         //计算每个商品金额
  97.         function getAmount(numArr,priceArr){
  98.             return numArr.map((num,index)=>num*priceArr[index]);
  99.         }
  100.         //总金额
  101.         function getTotalAmount(amountArr){
  102.             amountArr=goodStatus(amountArr);
  103.             return amountArr.reduce((acc,cur)=>acc+cur);
  104.         }
  106.         //自动计算
  107.         function autoCalculate() {
  108.             //数量数组
  109.             const numArr=[...nums].map((num)=>parseInt(num.value));
  110.             //单价数组
  111.             const prices=document.querySelectorAll('.price');
  112.             const pricesArr=[...prices].map((price)=>parseInt(price.textContent));
  113.             //金额数组
  114.             const amountArr =getAmount(numArr,pricesArr);
  115.             document.querySelector('.total-num').textContent = getTotalNum(numArr);
  116.         document.querySelector('.total-amount').textContent =
  117.           getTotalAmount(amountArr);
  118.         //为每个商品填充金额
  119.         document
  120.           .querySelectorAll('.amount')
  121.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  122.       }
  123.       //自动加载
  124.       window.onload = autoCalculate();
  125.       //数量变化自动计算
  126.       [...nums].forEach((num) => (num.onchange = autoCalculate));
  127.     </script>
  128. </body>
  129. </html>

效果：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行