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

搜索
博主信息
博文 128
粉絲 9
評(píng)論 5
訪問量 289598
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
【JavaScript案例】購(gòu)物車全選和自動(dòng)計(jì)算金額案例（附源碼）及ES6模塊化編程導(dǎo)入導(dǎo)出詳解
　一紙荒涼* Armani
原創(chuàng)
4282人瀏覽過

購(gòu)物車商品全選和金額計(jì)算案例

  1.       table {
  2.             border-collapse: collapse;
  3.             width: 90%;
  4.             text-align: center;
  5.             margin: auto;
  6.         }
  8.         table caption {
  9.             margin-bottom: 15px;
  10.             font-size: 1.5rem;
  11.         }
  13.         table th,
  14.         table td {
  15.             border-bottom: 1px solid #ccc;
  16.             padding: 5px;
  17.             font-weight: normal;
  18.         }
  20.         table thead tr:first-of-type {
  21.             background-color: #e6e6e6;
  22.             height: 3em;
  23.         }
  25.         table input[type="checkbox"] {
  26.             width: 1.5em;
  27.             height: 1.5em;
  28.         }
  30.         table tbody tr {
  31.             border-bottom: 1px solid #ccc;
  32.         }
  34.         table tbody tr:hover {
  35.             background-color: #f6f6f6;
  36.             cursor: pointer;
  37.         }
  39.         tbody img {
  40.             width: 3em;
  41.         }
  43.         tbody input[type="number"] {
  44.             width: 3em;
  45.         }
  47.         button {
  48.             width: 150px;
  49.             height: 30px;
  50.             outline: none;
  51.             border: none;
  52.             background-color: teal;
  53.             color: white;
  54.             letter-spacing: 5px;
  55.         }
  57.         button:hover {
  58.             opacity: 0.7;
  59.             cursor: pointer;
  60.         }
  1.  <table>
  2.         <caption>
  3.             購(gòu)物車
  4.         </caption>
  5.         <thead>
  6.             <tr>
  7.                 <!-- 全選復(fù)選框 -->
  8.                 <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全選</label></th>
  9.                 <th>圖片</th>
  10.                 <th>品名</th>
  11.                 <th>單位</th>
  12.                 <th>單價(jià)/元</th>
  13.                 <th>數(shù)量</th>
  14.                 <th>金額/元</th>
  15.             </tr>
  16.         </thead>
  17.         <tbody>
  18.             <tr>
  19.                 <td>
  20.                     <input type="checkbox" name="item" value="SN-1020" checked />
  21.                 </td>
  22.                 <td>
  23.                     <a href=""><img src="images/p1.jpg" alt="" /></a>
  24.                 </td>
  25.                 <td>iPhone 11</td>
  26.                 <td>臺(tái)</td>
  27.                 <td class="price">4799</td>
  28.                 <td><input type="number" min="1" value="1" /></td>
  29.                 <td class="amount">4799</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>
  33.                     <input type="checkbox" name="item" value="SN-1020" checked />
  34.                 </td>
  35.                 <td>
  36.                     <a href=""><img src="images/p2.jpg" alt="" /></a>
  37.                 </td>
  38.                 <td>小米pro 11</td>
  39.                 <td>部</td>
  40.                 <td class="price">3999</td>
  41.                 <td><input type="number" min="1" value="2" /></td>
  42.                 <td class="amount">7998</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>
  46.                     <input type="checkbox" name="item" value="SN-1030" checked />
  47.                 </td>
  48.                 <td>
  49.                     <a href=""><img src="images/p3.jpg" alt="" /></a>
  50.                 </td>
  51.                 <td>MacBook Pro</td>
  52.                 <td>臺(tái)</td>
  53.                 <td class="price">18999</td>
  54.                 <td><input type="number" min="1" value="1" /></td>
  55.                 <td class="amount">18999</td>
  56.             </tr>
  57.             <tr>
  58.                 <td>
  59.                     <input type="checkbox" name="item" value="SN-1040" checked />
  60.                 </td>
  61.                 <td>
  62.                     <a href=""><img src="images/p4.jpg" alt="" /></a>
  63.                 </td>
  64.                 <td>小米75電視</td>
  65.                 <td>臺(tái)</td>
  66.                 <td class="price">5999</td>
  67.                 <td><input type="number" min="1" value="2" /></td>
  68.                 <td class="amount">11998</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>
  72.                     <input type="checkbox" name="item" value="SN-1050" checked />
  73.                 </td>
  74.                 <td>
  75.                     <a href=""><img src="images/p5.jpg" alt="" /></a>
  76.                 </td>
  77.                 <td>Canon 90D單反</td>
  78.                 <td>臺(tái)</td>
  79.                 <td class="price">9699</td>
  80.                 <td><input type="number" min="1" value="1" /></td>
  81.                 <td class="amount">9699</td>
  82.             </tr>
  83.         </tbody>
  84.         <tfoot>
  85.             <tr style="font-weight: bolder; font-size: 1.2em">
  86.                 <td colspan="5">總計(jì):</td>
  87.                 <td id="sum">7</td>
  88.                 <td id="total-amount">53493</td>
  89.             </tr>
  90.         </tfoot>
  91.     </table>
  92.     <div style="width: 90%; margin: 10px auto">
  93.         <button style="float: right; width: 100px">結(jié)算</button>
  94.     </div>
  1.  // 1.獲取全選按鈕，每個(gè)獨(dú)立的商品復(fù)選框
  2.         const checkAll = document.querySelector('#check-all');
  3.         const checkItems = document.getElementsByName("item");
  6.         // 2. 將當(dāng)前的全選的狀態(tài)變化賦值給每個(gè)商品復(fù)選框
  7.         checkAll.addEventListener('change', (ev) => {
  8.             checkItems.forEach(item => {
  9.                 item.checked = ev.target.checked
  10.             });
  11.             // 根據(jù)選中狀態(tài)計(jì)算商品的總金額和總數(shù)量
  12.             amountTotal();
  13.         });
  16.         // 3. 為每個(gè)單獨(dú)商品的復(fù)選框添加事件
  17.         checkItems.forEach(item => {
  18.             item.addEventListener('change', () => {
  19.                 checkAll.checked = [...checkItems].every(item => item.checked);
  20.                 // 根據(jù)選中狀態(tài)計(jì)算商品的總金額和總數(shù)量
  21.                 amountTotal();
  22.             })
  23.         });
  26.         // 4.為數(shù)量按鈕添加事件，動(dòng)態(tài)計(jì)算商品總量和金額
  27.         const numInput = document.querySelectorAll('tbody input[type="number"]');
  28.         numInput.forEach(input => input.addEventListener('change', autoCalculate));
  29.         // 頁(yè)面加載完成自動(dòng)計(jì)算
  30.         window.addEventListener('load', autoCalculate);
  34.         // 5. 自動(dòng)計(jì)算方法
  35.         function autoCalculate() {
  36.             // 獲取所有商品單價(jià)節(jié)點(diǎn)
  37.             const prices = document.querySelectorAll('tbody .price');
  38.             // 獲得所有商品單價(jià)金額
  39.             const priceArr = [...prices].map(price => +price.innerText);
  40.             console.log(priceArr);
  42.             // 獲取所有數(shù)量按鈕節(jié)點(diǎn)
  43.             const numbers = document.querySelectorAll('tbody input[type="number"]');
  44.             // 獲得所有商品數(shù)量數(shù)組
  45.             const numArr = [...numbers].map(num => +num.value);
  46.             console.log(numArr);
  48.             // 計(jì)算單個(gè)商品金額 = 數(shù)量*單價(jià) 
  49.             let amountArr = [priceArr, numArr].reduce((total, curr) => {
  50.                 return total.map((item, index) => {
  51.                     return item * curr[index]
  52.                 })
  53.             });
  54.             // 將每一個(gè)商品金額渲染到頁(yè)面中
  55.             document.querySelectorAll('.amount').forEach((item, index) => {
  56.                 item.innerText = amountArr[index]
  57.             })
  59.             // 計(jì)算總數(shù)量總數(shù)量
  60.             amountTotal();
  61.         }
  64.         // 根據(jù)復(fù)選框選中狀態(tài)計(jì)算總金額和總數(shù)量
  65.         function amountTotal() {
  66.             // 獲取所有數(shù)量按鈕節(jié)點(diǎn)
  67.             const numbers = document.querySelectorAll('tbody input[type="number"]');
  68.             // 獲得所有商品數(shù)量數(shù)組
  69.             const numArr = [...numbers].map(num => {
  70.                 // 獲取當(dāng)前數(shù)量節(jié)點(diǎn)父節(jié)點(diǎn)下的check復(fù)選框
  71.                 const check = num.parentElement.parentElement.querySelector('input[type="checkbox"]');
  72.                 // 過濾出選中的商品數(shù)量數(shù)組
  73.                 return check.checked ? +num.value : 0;
  74.             });
  75.             console.log(numArr);
  77.             // 獲取所有單個(gè)商品總金額節(jié)點(diǎn)
  78.             const amounts = document.querySelectorAll('.amount');
  79.             // 獲得所有單個(gè)商品總金額數(shù)組
  80.             const amountArr = [...amounts].map(amount => {
  81.                 // 獲取當(dāng)前數(shù)量節(jié)點(diǎn)父節(jié)點(diǎn)下的check復(fù)選框
  82.                 const check = amount.parentElement.querySelector('input[type="checkbox"]');
  83.                 // 過濾出選中的商品數(shù)量數(shù)組
  84.                 return check.checked ? +amount.innerText : 0;
  85.             });
  86.             console.log(amountArr);
  87.             // 計(jì)算總數(shù)量
  88.             document.querySelector('#sum').innerText = `${numArr.reduce((pre, cur) => pre + cur)}件`;
  89.             // 計(jì)算總金額
  90.             document.querySelector('#total-amount').textContent = `￥${amountArr.reduce((pre, curr) => pre + curr)}`;
  91.         }

實(shí)現(xiàn)效果：

預(yù)覽地址：http://easys.ltd/shopcart/

ES6的模塊化實(shí)現(xiàn)

一個(gè)模塊就是一個(gè)獨(dú)立的js代碼塊文件，下面將介紹module中的export和import概念。
ES6 module 模塊功能使用 export 導(dǎo)出模塊的內(nèi)容，并使用 import 導(dǎo)入模塊的內(nèi)容。

示例：

  1. // math.js(定義模塊)
  2. exports.add = function(a, b) {
  3.     return a + b;
  4. };
  6. // app.js(使用模塊)
  7. var math = require('./math');
  9. var rs = math.add(1, 2);
  10. console.log(rs);

（導(dǎo)出）export用于規(guī)定模塊的對(duì)外接口

創(chuàng)建ES6模塊時(shí)，可使用export關(guān)鍵字導(dǎo)出(對(duì)外提供)模塊的內(nèi)容，如函數(shù)、對(duì)象以及原始變量等等。

export 導(dǎo)出方案有2種：Named exports（命名導(dǎo)出；每個(gè)模塊可有多個(gè)）和 Default exports（默認(rèn)導(dǎo)出；每個(gè)模塊只能一個(gè)）。

Named exports 命名導(dǎo)出

說明：使用 export + 名稱 的形式導(dǎo)出模塊的內(nèi)容。

注意：在 import 導(dǎo)入過程中，需指定這些名稱。

  1. // 1) 聲明時(shí)導(dǎo)出
  2. export let myVar = 'a';
  3. export const MY_CONST = 'c';
  4. export const getName = () => {}...
  5. export const getAge = () => {}...
  6. export function getName(){
  7.   return ...
  8. }
  10. // 2) 聲明后導(dǎo)出
  11. var myVar = 'a';
  12. export const MY_CONST = 'c';
  13. const getName = () =>{} ...
  14. const getAge = () =>{} ...
  15. export {myVar,MY_CONST,getName,getAge}
  17. // 3) 別名導(dǎo)出
  18. var myVar3 = 'a';
  19. export { myVar3 as myVar };
  22. // math.js
  23. export function add(a, b) {
  24.     return a + b;
  25. }
  27. // app.js：導(dǎo)入含有命名導(dǎo)出的模塊時(shí)，需要指定成員名稱
  28. import { add } from './math.js';
  29. console.log(add(1, 2)); // => 3

Default exports 默認(rèn)導(dǎo)出

說明：使用 export default 導(dǎo)出模塊默認(rèn)的內(nèi)容，每個(gè)模塊只能有一個(gè) export default。

  1. // 1） 聲明時(shí)導(dǎo)出 匿名函數(shù)
  2. export default expression;
  3. export default function() {
  4.   return ...
  5. }
  6. export default () => {}...
  8. // 2） 別名設(shè)置為default導(dǎo)出
  9. export default function name1() {}
  10. export { name1 as default };

默認(rèn)導(dǎo)出聲明的是一個(gè)表達(dá)式，通常沒有名字，導(dǎo)入時(shí)需指定模塊名稱。

  1. // math.js
  2. export function add(a, b) {
  3.     return a + b;
  4. }
  5. export default function cube(x) {
  6.     return x * x * x;
  7. }
  9. // app.js：導(dǎo)入默認(rèn)導(dǎo)出的模塊時(shí)，需要指定模塊名稱
  10. import cube from './math.js';
  11. console.log(cube(3)); // => 27
  13. // 若想同時(shí)導(dǎo)入含有默認(rèn)導(dǎo)出、命名導(dǎo)出的模塊，只需要導(dǎo)入時(shí)用','隔開
  14. import cube, { add } from './math.js';

（導(dǎo)入）import用于輸入其他模塊提供的功能

  1. // 1)導(dǎo)入模塊的默認(rèn)導(dǎo)出內(nèi)容
  2. import defaultExport from 'module-name';
  4. // 2)導(dǎo)入模塊的命名導(dǎo)出內(nèi)容
  5. import { export1, export2 } from 'module-name';
  6. import { export as alias } from 'module-name'; // 修改別名
  7. import * as name from 'module-name'; // 導(dǎo)入模塊內(nèi)的所有命名導(dǎo)出內(nèi)容
  9. // 3)導(dǎo)入模塊的默認(rèn)導(dǎo)出、命名導(dǎo)出
  10. import defaultExport, { export1, export2 } from 'module-name';
  11. import defaultExport, * as name from 'module-name';

1) 導(dǎo)入默認(rèn)導(dǎo)出

說明：導(dǎo)入默認(rèn)導(dǎo)出的模塊時(shí)，需要指定模塊名稱

  1. // math.js
  2. export default function cube(x) {
  3.     return x * x * x;
  4. }
  6. // app.js：導(dǎo)入默認(rèn)導(dǎo)出的模塊時(shí)，需要指定模塊名稱
  7. import cube from './math.js';
  8. console.log(cube(3)); // => 27
  11. import user from './default.js' // 如果使用這種引入請(qǐng)導(dǎo)出匿名函數(shù)

2) 導(dǎo)入命名導(dǎo)出

說明：導(dǎo)入模塊時(shí)可使用大括號(hào)包含指定命名成員；也可以用 * as moduleName 的形式把此模塊的所有命名導(dǎo)出作為某個(gè)對(duì)象的成員。

  1. // math.js
  2. export function add(a, b) {
  3.     return a + b;
  4. }
  6. // app.js：指定使用math模塊的add命名導(dǎo)出
  7. import { add } from './math.js';
  8. console.log(add(1, 2)); // => 3
  11. // 按需引入
  12. import { getName, getAge } from './utils.js' 
  15. // 導(dǎo)入所有的命名導(dǎo)出作為math對(duì)象的成員
  16. import * as math from './math.js';
  17. console.log(math.add(1, 2)); // => 3
  19. // 將引入的模塊賦值到user對(duì)象中
  20. import * as user from './utils.js' 
  21. // 結(jié)構(gòu)會(huì)變成如下樣式
  22. // user = {
  23. //   getAge: function(){ ... }
  24. //   getName: function(){ ... }
  25. // }

3) 僅導(dǎo)入模塊

說明：僅導(dǎo)入模塊時(shí)，只會(huì)執(zhí)行模塊的全局函數(shù)，不會(huì)導(dǎo)入任何成員。

  1. // math.js
  2. export function add(a, b) {
  3.     return a + b;
  4. }
  5. function hello() {
  6.     console.log('hello math.js');
  7. }
  8. hello();
  10. // app.js
  11. import { add } from './math.js'; // => hello math.js

注意：模塊成員在當(dāng)前使用環(huán)境中，既不能重復(fù)聲明，也不能更新（相對(duì)應(yīng)常量）

批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：非常出色
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(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é)