search

博客列表 >【JavaScript案例】购物车全选和自动计算金额案例（附源码）及ES6模块化编程导入导出详解

【JavaScript案例】购物车全选和自动计算金额案例（附源码）及ES6模块化编程导入导出详解

　一纸荒凉* Armani
　一纸荒凉* Armani原创
2021年04月13日 16:30:094030浏览

购物车商品全选和金额计算案例

  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.             购物车
  4.         </caption>
  5.         <thead>
  6.             <tr>
  7.                 <!-- 全选复选框 -->
  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>单价/元</th>
  13.                 <th>数量</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>台</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>台</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>台</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>台</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">总计:</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">结算</button>
  94.     </div>
  1.  // 1.获取全选按钮，每个独立的商品复选框
  2.         const checkAll = document.querySelector('#check-all');
  3.         const checkItems = document.getElementsByName("item");
  6.         // 2. 将当前的全选的状态变化赋值给每个商品复选框
  7.         checkAll.addEventListener('change', (ev) => {
  8.             checkItems.forEach(item => {
  9.                 item.checked = ev.target.checked
  10.             });
  11.             // 根据选中状态计算商品的总金额和总数量
  12.             amountTotal();
  13.         });
  16.         // 3. 为每个单独商品的复选框添加事件
  17.         checkItems.forEach(item => {
  18.             item.addEventListener('change', () => {
  19.                 checkAll.checked = [...checkItems].every(item => item.checked);
  20.                 // 根据选中状态计算商品的总金额和总数量
  21.                 amountTotal();
  22.             })
  23.         });
  26.         // 4.为数量按钮添加事件，动态计算商品总量和金额
  27.         const numInput = document.querySelectorAll('tbody input[type="number"]');
  28.         numInput.forEach(input => input.addEventListener('change', autoCalculate));
  29.         // 页面加载完成自动计算
  30.         window.addEventListener('load', autoCalculate);
  34.         // 5. 自动计算方法
  35.         function autoCalculate() {
  36.             // 获取所有商品单价节点
  37.             const prices = document.querySelectorAll('tbody .price');
  38.             // 获得所有商品单价金额
  39.             const priceArr = [...prices].map(price => +price.innerText);
  40.             console.log(priceArr);
  42.             // 获取所有数量按钮节点
  43.             const numbers = document.querySelectorAll('tbody input[type="number"]');
  44.             // 获得所有商品数量数组
  45.             const numArr = [...numbers].map(num => +num.value);
  46.             console.log(numArr);
  48.             // 计算单个商品金额 = 数量*单价 
  49.             let amountArr = [priceArr, numArr].reduce((total, curr) => {
  50.                 return total.map((item, index) => {
  51.                     return item * curr[index]
  52.                 })
  53.             });
  54.             // 将每一个商品金额渲染到页面中
  55.             document.querySelectorAll('.amount').forEach((item, index) => {
  56.                 item.innerText = amountArr[index]
  57.             })
  59.             // 计算总数量总数量
  60.             amountTotal();
  61.         }
  64.         // 根据复选框选中状态计算总金额和总数量
  65.         function amountTotal() {
  66.             // 获取所有数量按钮节点
  67.             const numbers = document.querySelectorAll('tbody input[type="number"]');
  68.             // 获得所有商品数量数组
  69.             const numArr = [...numbers].map(num => {
  70.                 // 获取当前数量节点父节点下的check复选框
  71.                 const check = num.parentElement.parentElement.querySelector('input[type="checkbox"]');
  72.                 // 过滤出选中的商品数量数组
  73.                 return check.checked ? +num.value : 0;
  74.             });
  75.             console.log(numArr);
  77.             // 获取所有单个商品总金额节点
  78.             const amounts = document.querySelectorAll('.amount');
  79.             // 获得所有单个商品总金额数组
  80.             const amountArr = [...amounts].map(amount => {
  81.                 // 获取当前数量节点父节点下的check复选框
  82.                 const check = amount.parentElement.querySelector('input[type="checkbox"]');
  83.                 // 过滤出选中的商品数量数组
  84.                 return check.checked ? +amount.innerText : 0;
  85.             });
  86.             console.log(amountArr);
  87.             // 计算总数量
  88.             document.querySelector('#sum').innerText = `${numArr.reduce((pre, cur) => pre + cur)}件`;
  89.             // 计算总金额
  90.             document.querySelector('#total-amount').textContent = `￥${amountArr.reduce((pre, curr) => pre + curr)}`;
  91.         }

实现效果：

预览地址：http://easys.ltd/shopcart/

ES6的模块化实现

一个模块就是一个独立的js代码块文件，下面将介绍module中的export和import概念。
ES6 module 模块功能使用 export 导出模块的内容，并使用 import 导入模块的内容。

示例：

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

（导出）export用于规定模块的对外接口

创建ES6模块时，可使用export关键字导出(对外提供)模块的内容，如函数、对象以及原始变量等等。

export 导出方案有2种：Named exports（命名导出；每个模块可有多个）和 Default exports（默认导出；每个模块只能一个）。

Named exports 命名导出

说明：使用 export + 名称 的形式导出模块的内容。

注意：在 import 导入过程中，需指定这些名称。

  1. // 1) 声明时导出
  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) 声明后导出
  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) 别名导出
  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：导入含有命名导出的模块时，需要指定成员名称
  28. import { add } from './math.js';
  29. console.log(add(1, 2)); // => 3

Default exports 默认导出

说明：使用 export default 导出模块默认的内容，每个模块只能有一个 export default。

  1. // 1） 声明时导出 匿名函数
  2. export default expression;
  3. export default function() {
  4.   return ...
  5. }
  6. export default () => {}...
  8. // 2） 别名设置为default导出
  9. export default function name1() {}
  10. export { name1 as default };

默认导出声明的是一个表达式，通常没有名字，导入时需指定模块名称。

  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：导入默认导出的模块时，需要指定模块名称
  10. import cube from './math.js';
  11. console.log(cube(3)); // => 27
  13. // 若想同时导入含有默认导出、命名导出的模块，只需要导入时用','隔开
  14. import cube, { add } from './math.js';

（导入）import用于输入其他模块提供的功能

  1. // 1)导入模块的默认导出内容
  2. import defaultExport from 'module-name';
  4. // 2)导入模块的命名导出内容
  5. import { export1, export2 } from 'module-name';
  6. import { export as alias } from 'module-name'; // 修改别名
  7. import * as name from 'module-name'; // 导入模块内的所有命名导出内容
  9. // 3)导入模块的默认导出、命名导出
  10. import defaultExport, { export1, export2 } from 'module-name';
  11. import defaultExport, * as name from 'module-name';

1) 导入默认导出

说明：导入默认导出的模块时，需要指定模块名称

  1. // math.js
  2. export default function cube(x) {
  3.     return x * x * x;
  4. }
  6. // app.js：导入默认导出的模块时，需要指定模块名称
  7. import cube from './math.js';
  8. console.log(cube(3)); // => 27
  11. import user from './default.js' // 如果使用这种引入请导出匿名函数

2) 导入命名导出

说明：导入模块时可使用大括号包含指定命名成员；也可以用 * as moduleName 的形式把此模块的所有命名导出作为某个对象的成员。

  1. // math.js
  2. export function add(a, b) {
  3.     return a + b;
  4. }
  6. // app.js：指定使用math模块的add命名导出
  7. import { add } from './math.js';
  8. console.log(add(1, 2)); // => 3
  11. // 按需引入
  12. import { getName, getAge } from './utils.js' 
  15. // 导入所有的命名导出作为math对象的成员
  16. import * as math from './math.js';
  17. console.log(math.add(1, 2)); // => 3
  19. // 将引入的模块赋值到user对象中
  20. import * as user from './utils.js' 
  21. // 结构会变成如下样式
  22. // user = {
  23. //   getAge: function(){ ... }
  24. //   getName: function(){ ... }
  25. // }

3) 仅导入模块

说明：仅导入模块时，只会执行模块的全局函数，不会导入任何成员。

  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

注意：模块成员在当前使用环境中，既不能重复声明，也不能更新（相对应常量）

上一条：VUE之组件及传参方式下一条：前端170面试题+答案学习整理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多