亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 37
粉絲 0
評(píng)論 0
訪問量 43379
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
購物車案例
手機(jī)用戶1607314868
原創(chuàng)
795人瀏覽過

array.every()和array.some()

every(callback): 對數(shù)組中每個(gè)成員進(jìn)行回調(diào)處理,只有全部為true,最終才返回true,否則就是false
類似” and “,” 邏輯與 “
例如：[5, 6, 7, 8].every(item => item > 3)
當(dāng)前數(shù)組中的元素全部都大于3返回true
在數(shù)組中只要存在大于6的成員,就是返回true
[5, 6, 7, 8].some(item => item > 6)

模塊的知識(shí)

什么是模塊？
模塊就是一個(gè)js代碼塊
封裝成模塊的js文件，內(nèi)部成員對外不可見，除非導(dǎo)出來，模塊解決了js的模塊化開發(fā)與代碼封裝問題
模塊解決了什么問題？
可維護(hù)性：每個(gè)模塊是獨(dú)立的，各寫各個(gè)互不影響，出錯(cuò)直接定位責(zé)任人
可復(fù)制性：只需要一條import指令就可以導(dǎo)入
避免污染全局空間：模塊處在自己的命名空間

模塊是一個(gè)js文件，顯然不能像之前一樣，將js代碼寫到html中
模塊要到一個(gè)獨(dú)立的js文件中，并使用一些特別的語法和關(guān)鍵字

  1. <script type="module">
  2. //聲明為模塊
  3.   //導(dǎo)入 userName變量 從 module1.js文件中
  4.   import {userName,hello} from './module1.js';
  5. console.log(userName); 
  6. console.log(hello(userName));
  7. //禁止重復(fù)聲明模塊成員
  8. let userName; //報(bào)錯(cuò)
  9. //模塊成員不允許更新
  10. userName="小李";//報(bào)錯(cuò)
  12. //別名導(dǎo)出解決以上報(bào)錯(cuò)
  13. import {myName,echo} from './module1.js';
  14. //別名導(dǎo)入也可解決以上報(bào)錯(cuò)
  15. import {userName as firstName} from './module1.js';
  17. //導(dǎo)入默認(rèn)模塊  不用{}
  18. import Name from './module1.js';
  19. //導(dǎo)入默認(rèn)成員和普通成員
  20. import world,{email} from './module1.js';
  23. //-------------------命名空間
  24. // 命名空間是一個(gè)容器，內(nèi)部可以包括任何類型的數(shù)據(jù)
  25. // 命名空間是一個(gè)對象，可以掛載到當(dāng)前全局中
  26. //導(dǎo)入的所有變量掛載到 namespace 下
  27. import * as namespace from "./module1.js";
  29. </script>

//module1.js 文件

  1. //export導(dǎo)出
  2. export let userName="小明";
  3. export function hello(name){
  4.   return "hello" +name;
  5. }
  6. //統(tǒng)一導(dǎo)出 在userName就不用再聲明exprot了
  7. export{userName,hello}
  9. //解決在腳本中不能聲明問題使用別名導(dǎo)出
  10. export{userName as myName,hello as echo};
  12. //默認(rèn)的成員
  13. //一個(gè)模塊只允許一個(gè)默認(rèn)導(dǎo)出
  14. let Name="小紅";
  15. export default Name;
  17. //導(dǎo)出列表中，既有默認(rèn)成員，也有普通成員
  18. function world(name){
  19.     return name;
  20. }
  21. let email="admin@php.cn";
  22. //world 別名default 則聲明成了默認(rèn)成員
  23. export{ email,world as default};

購物車案例

點(diǎn)擊全選/全不選
原生：

  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.         //當(dāng)item都選上則全選按鈕選中
  7.         items.forEach(item=>(item.onchange=()=>(checkAll.checked=[...items].every(item=>item.checked)))
  8.         );

jquery實(shí)現(xiàn)

  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));

計(jì)算總價(jià)：
感覺方法欠妥，但又想不出更好的了。
實(shí)現(xiàn)改變狀態(tài)，自動(dòng)計(jì)算金額

  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.         <!-- 全選復(fù)選框 -->
  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>單價(jià)/元</th>
  22.         <th>數(shù)量</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>臺(tái)</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>臺(tái)</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>臺(tái)</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>臺(tái)</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">總計(jì):</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">結(jié)算</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.            //點(diǎn)擊全選則都選上
  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.     //------------------------計(jì)算總價(jià)----------------------------------------
  128. //---------------------根據(jù)復(fù)選框狀態(tài)，自動(dòng)計(jì)算金額-----------------------------------------------
  129.     // 得到所有臺(tái)數(shù)標(biāo)簽
  130.     const numInputs = document.querySelectorAll('tbody input[type="number"]');
  131.     //單價(jià)標(biāo)簽
  132.     const prices=document.querySelectorAll("tbody .price");
  133.     //金額標(biāo)簽
  134.     const amount=document.querySelectorAll(".amount");
  136.     items.forEach(item=>(item.onchange=()=>{ 
  137.       //改變?nèi)x按鈕狀態(tài)
  138.       checkAll.checked=[...items].every(item=>item.checked);
  139.       //將復(fù)選框狀態(tài)放到一個(gè)數(shù)組里
  140.       let numite=[...items].map(item=>item.checked);
  141.       for(let i=0;i<numite.length;i++){
  142.       if(!numite[i]){
  143.         //根據(jù)選擇狀態(tài)false  改變 臺(tái)數(shù)和單價(jià)的 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. //--------------------弊端：未選中的商品，改變其數(shù)量則無法計(jì)算出其總金額------------------------------------------
  156. //-------------------------全選按鈕沒有實(shí)現(xiàn)，全選了計(jì)算總金額-----------------------------------------------
  157. //------------------------自己實(shí)現(xiàn)方式雖然解決了問題了，但總感覺存在弊端，不是完美的解決方式---------------------
  159.     const numInput = document.querySelectorAll('tbody input.inputt[type="number"]');
  160.     numInput.forEach(input => (onchange = autoCalculate));
  162.       // 用戶更新數(shù)量時(shí)觸發(fā)自動(dòng)計(jì)算
  163.     window.onload=autoCalculate;
  165.     // 封裝一個(gè)自動(dòng)計(jì)算的函數(shù)
  166.     function autoCalculate() {
  167.     //計(jì)算商品數(shù)量
  168.     const numbers=document.querySelectorAll('tbody input.inputt[type="number"]');
  170.     const numArr=[...numbers].map(item=>item.value*1);
  171.     //計(jì)算選擇了的臺(tái)數(shù)
  173.     let sum=numArr.reduce((pre,cur)=>pre+cur);
  175.     //計(jì)算總金額  數(shù)量* 單價(jià)
  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.     // 計(jì)算總金額
  181.     //只計(jì)算選上的數(shù)據(jù)
  182.     let totalAmount = amountArr.reduce((pre, cur) => pre + cur);
  183.     //將結(jié)果渲染到頁面中
  184.     document.querySelector('#sum').textContent=sum;
  185.     document.querySelector('#total-amount').textContent=totalAmount;
  186.     // 每個(gè)商品的金額
  187.     document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
  188.     }
  189.     </script>
  190. </body>
  191. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)