search

博客列表 >购物车案例

购物车案例

手机用户1607314868
手机用户1607314868原创
2021年01月18日 07:23:05618浏览

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>
上一条：vue入门基础知识整理下一条：vue的基本指令
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多