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

  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

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

更多相关文章

  1. DAY03-实例演示选择器优先级、前端组件样式模块化实现、伪类选择
  2. Python基础—10-常用模块：time，calendar，datetime
  3. 如何导出存储过程、函数、包和触发器的定义语句？如何导出表和索引
  4. Oracle中有哪些指导模块（Advisor）？
  5. Nginx基于TCP/UDP端口的四层负载均衡（stream模块）配置梳理
  6. Python tkinter是什么？GUI编程有哪些？
  7. ES6 模块知识入门
  8. 使用PowerDesigner16.5 逆向数据库 导出word文档
  9. thinkphp无法加载模块解决办法

随机推荐

  1. android中的布局文件
  2. Android开发 准备工作
  3. 动态添加TableRow
  4. Android中设置activity的background为Wal
  5. android 沉浸式主题记录
  6. android TextView属性详解
  7. Android控件visible，invisible和gone
  8. Android ListView CheckBox点击事件
  9. Android月历控件（DatePicker）和时间控件（Tim
  10. Android - 文件读写操作 总结