ASCII码 ASCII码

js编程学习之实战购物车

发布于：2022-04-11 09:13:26  栏目：技术文档

购物车实战

实现效果

作业效果图

实现购物车: 只计算选中商品,并同时更新相关数据的主要思路方法

  • 定义全局checks变量，获取checkbox的NodeList
  • 自动计算函数中，获取商品数量数组时，判断checks[i]的选中状态，如果未选中，数量数组对应的值为0，否则为正常值。
  • 在全选框按钮的onchange事件中调用自动计算函数

  • 在选中框的onchange事件中调用自动计算函数

    代码实现

    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>购物车</title>
    8.   <style>
    9.       .box {
    10.           width: 22em;
    11.           height: 2em;
    12.       }
    14.       .list>li {
    15.           height: 1.6em;
    16.           background-color: #efefef;
    17.           display: grid;
    18.           grid-template-columns: repeat(5, 3em);
    19.           gap: 1em;
    20.           place-items: center right;
    21.           border-bottom: 1px solid #ccc;
    22.       }
    24.       .list>li:first-of-type {
    25.           background-color: lightseagreen;
    26.           color: white;
    27.       }
    29.       .list>li:hover:not(:first-of-type) {
    30.           cursor: pointer;
    31.           background-color: lightcyan;
    32.       }
    34.       .list>li input[type='number'] {
    35.           width: 3em;
    36.           border: none;
    37.           outline: none;
    38.           text-align: center;
    39.           font-size: 1em;
    40.           background-color: transparent;
    41.       }
    43.       .list>li:last-of-type span.total-num,
    44.       .list>li:last-of-type span.total-amount {
    45.           grid-column: span 2;
    46.           place-self: center right;
    47.           color: lightseagreen;
    48.       }
    50.       .account {
    51.           float: right;
    52.           background-color: lightseagreen;
    53.           color: white;
    54.           border: none;
    55.           outline: none;
    56.           width: 4.5em;
    57.           height: 1.8em;
    58.       }
    60.       .account:hover {
    61.           background-color: coral;
    62.           cursor: pointer;
    63.       }
    64.   </style>
    65. </head>
    66. <body>
    67.   <div class="box">
    68.       <div class="selectAll">
    69.           <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
    70.           <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
    71.           <label for="check-all">全选</label>
    72.       </div>
    73.       <ul class="list">
    74.           <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
    75.           <li>
    76.               <input type="checkbox" onchange="checkItems()" checked />
    77.               <span class="content">手机</span>
    78.               <input type="number" value="1" min="1" class="num" />
    79.               <span class="price">100</span>
    80.               <span class="amount">0</span>
    81.           </li>
    82.           <li>
    83.               <input type="checkbox" onchange="checkItems()" checked />
    84.               <span class="content">电脑</span>
    85.               <input type="number" value="2" min="1" class="num" />
    86.               <span class="price">200</span><span class="amount">0</span>
    87.           </li>
    88.           <li>
    89.               <input type="checkbox" onchange="checkItems()" checked />
    90.               <span class="content">相机</span>
    91.               <input type="number" value="3" min="1" class="num" />
    92.               <span class="price">300</span>
    93.               <span class="amount">0</span>
    94.           </li>
    95.           <li>
    96.               <span>总计:</span>
    97.               <span class="total-num">0</span>
    98.               <span class="total-amount">0</span>
    99.           </li>
    100.       </ul>
    101.       <button class="account">结算</button>
    102.   </div>
    103.   <script>
    104.       // 1.全选函数
    105.       function checkAll() {
    106.           // 1.全选按钮状态
    107.           let status = event.target.checked;
    108.           // 2.根据状态动态设定所有商品的状态
    109.           let items=document.querySelectorAll('.list li input[type="checkbox"]');
    110.           items.forEach(item=>(item.checked=status));
    111.           autoCalculate();
    112.       }
    113.       // 2.根据用户选择来动态设置全选状态
    114.       function checkItems() {
    115.           // 1.拿到全部商品
    116.           let items=document.querySelectorAll('.list li input[type="checkbox"]');
    117.           // 2.判断状态，只有全部被选择，才需要设置全选框为true
    118.           let status=[...items].every(item=>item.checked===true);
    119.           // 3.将这个新状态设置到全选按钮
    120.           document.querySelector('.check-all').checked=status;
    121.           autoCalculate();
    122.       }
    123.       // 3.商品自动计算
    124.       // 所有计算都是基于商品数量变
    125.       const nums=document.querySelectorAll('.num');
    126.       const checks=document.querySelectorAll('.list li input[type="checkbox"]');
    127.       console.log(checks);
    128.       // 3.1 计算总数量
    129.       function getTotalNum(numArr) {
    130.           return numArr.reduce((acc,cur)=>acc+cur);
    132.       }
    133.       // 3.2计算每个商品的金额
    134.       function getAmount(numArr, priceArr) {
    135.           //金额=数量*单价
    136.           return numArr.map((num,index)=>num*priceArr[index]);
    137.       }
    138.       // 3.3计算总金额
    139.       function getTotalAmount(amountArr) {
    140.           return amountArr.reduce((acc,cur)=>acc+cur);
    141.       }
    142.       // 3.4自动计算
    143.       function autoCalculate() {
    144.           // 商品数量数组
    145.           // const numArr=[...nums].map(num=>parseInt(num.value));
    146.           // 如果没选中数量为0
    147.           const numArr=[...nums].map((num,index)=>checks[index].checked?parseInt(num.value):0);
    148.           // 单价数组
    149.           const prices=document.querySelectorAll('.price');
    150.           const priceArr = [...prices].map(price=>parseFloat(price.textContent));
    151.           // console.log(priceArr);
    153.           // 金额数组
    154.           const amountArr=getAmount(numArr,priceArr);
    155.           // console.log(amountArr);
    157.           //总数量
    158.           document.querySelector('.total-num').textContent=getTotalNum(numArr);
    159.           // 总金额
    160.           document.querySelector('.total-amount').textContent=getTotalAmount(amountArr);
    161.           // 为每个商品填充金额
    162.           document.querySelectorAll('.amount').forEach((amount,index)=>amount.textContent=amountArr[index]);
    164.       }
    166.       // 当页面加载时自动计算
    167.       window.onload=autoCalculate;
    168.       // 当数量更新时，自动计算所有数据
    169.       nums.forEach(num=>(num.onchange=autoCalculate));
    171.   </script>
    172. </body>
    173. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行