Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 购物车案例
Blogger Information
Blog 37
fans 0
comment 0
visits 34710
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
购物车案例
手机用户1607314868
Original
619 people have browsed it

array.every()和array.some()

every(callback): 对数组中每个成员进行回调处理,只有全部为true,最终才返回true,否则就是false
类似” and “,” 逻辑与 “
例如：[5, 6, 7, 8].every(item => item > 3)
当前数组中的元素全部都大于3返回true
在数组中只要存在大于6的成员,就是返回true
[5, 6, 7, 8].some(item => item > 6)

模块的知识

什么是模块？
模块就是一个js代码块
封装成模块的js文件，内部成员对外不可见，除非导出来，模块解决了js的模块化开发与代码封装问题
模块解决了什么问题？
可维护性：每个模块是独立的，各写各个互不影响，出错直接定位责任人
可复制性：只需要一条import指令就可以导入
避免污染全局空间：模块处在自己的命名空间

模块是一个js文件，显然不能像之前一样，将js代码写到html中
模块要到一个独立的js文件中，并使用一些特别的语法和关键字

  1. <script type="module">
  2. //声明为模块
  3.   //导入 userName变量 从 module1.js文件中
  4.   import {userName,hello} from './module1.js';
  5. console.log(userName); 
  6. console.log(hello(userName));
  7. //禁止重复声明模块成员
  8. let userName; //报错
  9. //模块成员不允许更新
  10. userName="小李";//报错
  12. //别名导出解决以上报错
  13. import {myName,echo} from './module1.js';
  14. //别名导入也可解决以上报错
  15. import {userName as firstName} from './module1.js';
  17. //导入默认模块  不用{}
  18. import Name from './module1.js';
  19. //导入默认成员和普通成员
  20. import world,{email} from './module1.js';
  23. //-------------------命名空间
  24. // 命名空间是一个容器，内部可以包括任何类型的数据
  25. // 命名空间是一个对象，可以挂载到当前全局中
  26. //导入的所有变量挂载到 namespace 下
  27. import * as namespace from "./module1.js";
  29. </script>

//module1.js 文件

  1. //export导出
  2. export let userName="小明";
  3. export function hello(name){
  4.   return "hello" +name;
  5. }
  6. //统一导出 在userName就不用再声明exprot了
  7. export{userName,hello}
  9. //解决在脚本中不能声明问题使用别名导出
  10. export{userName as myName,hello as echo};
  12. //默认的成员
  13. //一个模块只允许一个默认导出
  14. let Name="小红";
  15. export default Name;
  17. //导出列表中，既有默认成员，也有普通成员
  18. function world(name){
  19.     return name;
  20. }
  21. let email="admin@php.cn";
  22. //world 别名default 则声明成了默认成员
  23. export{ email,world as default};

购物车案例

点击全选/全不选
原生：

  1.         const checkAll=document.querySelector('#check-all');
  2.         const items=document.getElementsByName('item');
  3.         checkAll.onchange=ev=>{
  4.             items.forEach(item=>item.checked=ev.target.checked);
  5.         } 
  6.         //当item都选上则全选按钮选中
  7.         items.forEach(item=>(item.onchange=()=>(checkAll.checked=[...items].every(item=>item.checked)))
  8.         );

jquery实现

  1.      $("#check-all").change(function(){
  2.        console.log( $(":checkbox[name='item']"));
  3.        $(":checkbox[name='item']").prop('checked',this.checked)
  4.      });
  5.      $(":checkbox[name='item']").change(ev=>$("#check-all").prop("checked",ev.target.checked));

计算总价：
感觉方法欠妥，但又想不出更好的了。
实现改变状态，自动计算金额

  1. <!DOCTYPE html>
  2. <html lang="en">
  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><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th>
  18.         <th>图片</th>
  19.         <th>品名</th>
  20.         <th>单位</th>
  21.         <th>单价/元</th>
  22.         <th>数量</th>
  23.         <th>金额/元</th>
  24.       </tr>
  25.     </thead>
  26.     <tbody>
  27.       <tr>
  28.         <td>
  29.           <input type="checkbox" name="item" value="SN-1020" checked />
  30.         </td>
  31.         <td>
  32.           <a href=""><img src="images/p1.jpg" alt="" /></a>
  33.         </td>
  34.         <td>iPhone 11</td>
  35.         <td>台</td>
  36.         <td class="price">4799</td>
  37.         <td><input  class="inputt" type="number" min="1" value="1" /></td>
  38.         <td class="amount">xxxx</td>
  39.       </tr>
  40.       <tr>
  41.         <td>
  42.           <input type="checkbox" name="item" value="SN-1020" checked />
  43.         </td>
  44.         <td>
  45.           <a href=""><img src="images/p2.jpg" alt="" /></a>
  46.         </td>
  47.         <td>小米pro 11</td>
  48.         <td>部</td>
  49.         <td class="price">3999</td>
  50.         <td><input class="inputt" type="number" min="1" value="2" /></td>
  51.         <td class="amount">xxxx</td>
  52.       </tr>
  53.       <tr>
  54.         <td>
  55.           <input type="checkbox" name="item" value="SN-1030" checked />
  56.         </td>
  57.         <td>
  58.           <a href=""><img src="images/p3.jpg" alt="" /></a>
  59.         </td>
  60.         <td>MacBook Pro</td>
  61.         <td>台</td>
  62.         <td class="price">18999</td>
  63.         <td><input class="inputt" type="number" min="1" value="1" /></td>
  64.         <td class="amount">xxxx</td>
  65.       </tr>
  66.       <tr>
  67.         <td>
  68.           <input type="checkbox" name="item" value="SN-1040" checked />
  69.         </td>
  70.         <td>
  71.           <a href=""><img src="images/p4.jpg" alt="" /></a>
  72.         </td>
  73.         <td>小米75电视</td>
  74.         <td>台</td>
  75.         <td class="price">5999</td>
  76.         <td><input class="inputt" type="number" min="1" value="2" /></td>
  77.         <td class="amount">xxxx</td>
  78.       </tr>
  79.       <tr>
  80.         <td>
  81.           <input type="checkbox" name="item" value="SN-1050" checked />
  82.         </td>
  83.         <td>
  84.           <a href=""><img src="images/p5.jpg" alt="" /></a>
  85.         </td>
  86.         <td>Canon 90D单反</td>
  87.         <td>台</td>
  88.         <td class="price">9699</td>
  89.         <td><input class="inputt" type="number" min="1" value="1" /></td>
  90.         <td class="amount">xxxx</td>
  91.       </tr>
  92.     </tbody>
  93.     <tfoot>
  94.       <tr style="font-weight: bolder; font-size: 1.2em">
  95.         <td colspan="5">总计:</td>
  96.         <td id="sum">xxxx</td>
  97.         <td id="total-amount">xxxx</td>
  98.       </tr>
  99.     </tfoot>
  100.   </table>
  101.   <div style="width: 90%; margin: 10px auto">
  102.     <button style="float: right; width: 100px">结算</button>
  103.   </div>
  105.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
  106.     </script> 
  107.     <script>
  109. //----jquery---------------------
  110.     //  $("#check-all").change(function(){
  111.     //    console.log( $(":checkbox[name='item']"));
  112.     //    $(":checkbox[name='item']").prop('checked',this.checked)
  114.     //  });
  115.     //  $(":checkbox[name='item']").change(ev=>$("#check-all").prop("checked",ev.target.checked));
  118.            //点击全选则都选上
  119.            const checkAll=document.querySelector('#check-all');
  120.         const items=document.getElementsByName('item');
  121.         checkAll.onchange=ev=>{
  122.             items.forEach(item=>item.checked=ev.target.checked);
  123.         } 
  124.     //------------------------计算总价----------------------------------------
  128. //---------------------根据复选框状态，自动计算金额-----------------------------------------------
  129.     // 得到所有台数标签
  130.     const numInputs = document.querySelectorAll('tbody input[type="number"]');
  131.     //单价标签
  132.     const prices=document.querySelectorAll("tbody .price");
  133.     //金额标签
  134.     const amount=document.querySelectorAll(".amount");
  136.     items.forEach(item=>(item.onchange=()=>{ 
  137.       //改变全选按钮状态
  138.       checkAll.checked=[...items].every(item=>item.checked);
  139.       //将复选框状态放到一个数组里
  140.       let numite=[...items].map(item=>item.checked);
  141.       for(let i=0;i<numite.length;i++){
  142.       if(!numite[i]){
  143.         //根据选择状态false  改变 台数和单价的 class 
  144.         numInputs[i].classList.replace('inputt','inputf');  
  145.         prices[i].classList.replace('price','pricef');
  146.         amount[i].classList.replace('amount','amountf');
  148.       }else{
  149.         numInputs[i].classList.replace('inputf','inputt'); 
  150.         prices[i].classList.replace('pricef','price');
  151.         amount[i].classList.replace('amountf','amount');
  152.       }
  153.     }
  154.     }));
  155. //--------------------弊端：未选中的商品，改变其数量则无法计算出其总金额------------------------------------------
  156. //-------------------------全选按钮没有实现，全选了计算总金额-----------------------------------------------
  157. //------------------------自己实现方式虽然解决了问题了，但总感觉存在弊端，不是完美的解决方式---------------------
  159.     const numInput = document.querySelectorAll('tbody input.inputt[type="number"]');
  160.     numInput.forEach(input => (onchange = autoCalculate));
  162.       // 用户更新数量时触发自动计算
  163.     window.onload=autoCalculate;
  165.     // 封装一个自动计算的函数
  166.     function autoCalculate() {
  167.     //计算商品数量
  168.     const numbers=document.querySelectorAll('tbody input.inputt[type="number"]');
  170.     const numArr=[...numbers].map(item=>item.value*1);
  171.     //计算选择了的台数
  173.     let sum=numArr.reduce((pre,cur)=>pre+cur);
  175.     //计算总金额  数量* 单价
  176.     const prices=document.querySelectorAll("tbody .price");
  177.     const priceArr=[...prices].map(item=>item.textContent*1);
  178.     const amountArr =[priceArr,numArr].reduce((total, curr)=>total.map((item,index)=>item*curr[index]));
  179.     // 计算总金额
  181.     //只计算选上的数据
  182.     let totalAmount = amountArr.reduce((pre, cur) => pre + cur);
  183.     //将结果渲染到页面中
  184.     document.querySelector('#sum').textContent=sum;
  185.     document.querySelector('#total-amount').textContent=totalAmount;
  186.     // 每个商品的金额
  187.     document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
  188.     }
  189.     </script>
  190. </body>
  191. </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