简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >front 25 实战：换肤-随鼠标表单背景更换-购物车自动计算（0821fri）

front 25 实战：换肤-随鼠标表单背景更换-购物车自动计算（0821fri）

老黑
老黑原创
2020年08月29日 18:33:29520浏览

主要内容 - 几个实战：

  1. 背景换肤
  2. 表格背景随鼠标而动
  3. 作业：**购物车自动价格变化（随着是否选中商品），费老鼻子劲了，几点收获：
    • 通过for循环给类数组numbers加上index方法
    • 通过checkbox[number.index]进行checked判断，然后决定是返回0，还是正常的value。这样就在counts array形成前将数据整理好了。
    • 一个listener绑定两个function，这个之前没有尝试过。一个function是用来检验checkAll的，一个用来autoCalculate的。这样才能在checkbox发生change的时候两个动作一并完成。
    • 前面走的弯路：a - 在每个checkbox change那块琢磨；b-在autoCalculate那块琢磨。貌似很多时候都被counts = getCounts(numbers)截胡了，于是最后从numbers这块直接入手。**

1. 背景换肤

三个文件：html、css、js
换肤主要在js中实现。
准备图片放入到static下面的images中

  • html
  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="static/css/change-skin.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <img src="static/images/1.jpg" alt="" />
  12.       <img src="static/images/2.jpg" alt="" />
  13.       <img src="static/images/3.jpg" alt="" />
  14.     </div>
  15.     <script src="static/js/change-skin.js"></script>
  16.   </body>
  17. </html>
  • css
  1. .container {
  2.   width: 300px;
  3.   display: grid;
  4.   grid-template-columns: repeat(3, 1fr);
  5.   column-gap: 10px;
  6. }
  7. .container > img {
  8.   width: 100%;
  9.   border: 3px solid #fff;
  10.   opacity: 0.6;
  11. }
  12. .container > img:hover {
  13.   opacity: 1;
  14.   cursor: pointer;
  15.   width: 105%;
  16. }
  17. body {
  18.   background-image: url("../images/1.jpg");
  19.   background-repeat: no-repeat;
  20. }
  • js
  1. // 思路:将当前图片的src赋值给body的背景
  2. // 事件代理
  3. document.querySelector(".container").addEventListener("click", setSkin, false);
  5. function setSkin(ev) {
  6.   // ev.target: 事件触发者(img)
  7.   // ev.currentTarget: 事件绑定者(.container)
  8.   document.body.style.backgroundImage = "url(" + ev.target.src + ")";
  9. }

2. 表格的隔行变色

  • 同样是html、css、js三个文件

  • 这块用js控制class的添加可以实现，也可以通过css中直接鼠标hover去实现。具体见代码

  • html

  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="static//css/change-line-color.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         员工信息表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>编号</th>
  17.           <th>姓名</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>1</td>
  29.           <td>杨过</td>
  30.           <td>28</td>
  31.           <td>男</td>
  32.           <td>1890***655</td>
  33.           <td>123@qq.com</td>
  34.           <td>市场部</td>
  35.           <td>销售员</td>
  36.         </tr>
  37.         <tr>
  38.           <td>2</td>
  39.           <td>小龙女</td>
  40.           <td>28</td>
  41.           <td>女</td>
  42.           <td>1390***755</td>
  43.           <td>13323@qq.com</td>
  44.           <td>开发部</td>
  45.           <td>鼓励师</td>
  46.         </tr>
  47.         <tr>
  48.           <td>3</td>
  49.           <td>李莫愁</td>
  50.           <td>38</td>
  51.           <td>女</td>
  52.           <td>1359***222</td>
  53.           <td>1909023@qq.com</td>
  54.           <td>市场部</td>
  55.           <td>部长</td>
  56.         </tr>
  57.         <tr>
  58.           <td>4</td>
  59.           <td>尹志平</td>
  60.           <td>24</td>
  61.           <td>男</td>
  62.           <td>1889***882</td>
  63.           <td>3898023@qq.com</td>
  64.           <td>总经办</td>
  65.           <td>保洁</td>
  66.         </tr>
  67.         <tr>
  68.           <td>5</td>
  69.           <td>欧阳克</td>
  70.           <td>39</td>
  71.           <td>男</td>
  72.           <td>1399***882</td>
  73.           <td>4678933@qq.com</td>
  74.           <td>开发部</td>
  75.           <td>部长</td>
  76.         </tr>
  77.       </tbody>
  78.     </table>
  79.     <!-- <script src="static/js/change-line-color.js"></script> -->
  80.   </body>
  81. </html>
  • css
  1. table {
  2.   border: 1px solid #000;
  3.   border-collapse: collapse;
  4.   margin: 30px auto;
  5.   text-align: center;
  6.   width: 90%;
  7. }
  8. table caption {
  9.   font-size: 1.2rem;
  10.   margin-bottom: 15px;
  11. }
  12. th,
  13. td {
  14.   border: 1px solid #000;
  15.   padding: 5px;
  16. }
  17. table thead tr:first-of-type {
  18.   background-color: #ddd;
  19. }
  20. .active {
  21.   background-color: lightcyan;
  22. }
  24. /* 加点css也能实现，这样就可以不用下面的js来listener来实现了*/
  25. table tbody tr:hover {
  26.   background-color: lightcyan;
  27. }
  • js
  1. var tbody = document.querySelector("tbody");
  2. // 鼠标移入行时添加背景
  3. tbody.addEventListener("mousemove", addBgColor, false);
  4. // 鼠标移出行时添加背景
  5. tbody.addEventListener("mouseout", removeBgColor, false);
  7. function addBgColor(ev) {
  8.   // ev.target:　<td></td>
  9.   //   console.log(ev.target);
  10.   ev.target.parentNode.classList.add("active");
  11. }
  13. function removeBgColor(ev) {
  14.   ev.target.parentNode.classList.remove("active");
  15. }

3. 表格或购物篮全选

  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="static/css/check-all.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>
  17.             <input
  18.               type="checkbox"
  19.               name="checkAll"
  20.               id="check-all"
  21.               checked
  22.             /><label for="check-all">全选</label>
  23.           </th>
  24.           <th>ID</th>
  25.           <th>品名</th>
  26.           <th>单位</th>
  27.           <th>单价/元</th>
  28.           <th>数量</th>
  29.           <th>金额/元</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody>
  33.         <tr>
  34.           <td>
  35.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  36.           </td>
  37.           <td>SN-1010</td>
  38.           <td>MacBook Pro电脑</td>
  39.           <td>台</td>
  40.           <td>18999</td>
  41.           <td>1</td>
  42.           <td>18999</td>
  43.         </tr>
  44.         <tr>
  45.           <td>
  46.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  47.           </td>
  48.           <td>SN-1020</td>
  49.           <td>iPhone手机</td>
  50.           <td>部</td>
  51.           <td>4999</td>
  52.           <td>2</td>
  53.           <td>9998</td>
  54.         </tr>
  55.         <tr>
  56.           <td>
  57.             <input type="checkbox" name="itemId" value="SN-1030" checked />
  58.           </td>
  59.           <td>SN-1030</td>
  60.           <td>智能AI音箱</td>
  61.           <td>只</td>
  62.           <td>399</td>
  63.           <td>5</td>
  64.           <td>1995</td>
  65.         </tr>
  66.         <tr>
  67.           <td>
  68.             <input type="checkbox" name="itemId" value="SN-1040" checked />
  69.           </td>
  70.           <td>SN-1040</td>
  71.           <td>SSD移动硬盘</td>
  72.           <td>个</td>
  73.           <td>888</td>
  74.           <td>2</td>
  75.           <td>1776</td>
  76.         </tr>
  77.         <tr>
  78.           <td>
  79.             <input type="checkbox" name="itemId" value="SN-1050" checked />
  80.           </td>
  81.           <td>SN-1050</td>
  82.           <td>黄山毛峰</td>
  83.           <td>斤</td>
  84.           <td>999</td>
  85.           <td>3</td>
  86.           <td>2997</td>
  87.         </tr>
  88.       </tbody>
  89.       <tfoot>
  90.         <tr>
  91.           <td colspan="5">总计:</td>
  92.           <td>13</td>
  93.           <td>35765</td>
  94.         </tr>
  95.       </tfoot>
  96.     </table>
  97.     <div style="width: 90%; margin: 10px auto;">
  98.       <button style="float: right; width: 100px;">结算</button>
  99.     </div>
  100.     <script src="static/js/check-all.js"></script>
  101.   </body>
  102. </html>
  • css
  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: 1px solid;
  16.   padding: 5px;
  17. }
  19. table thead tr:first-of-type {
  20.   background-color: lightblue;
  21. }
  23. /* 隔行变色: 偶数行 */
  24. table tbody tr:nth-of-type(even) {
  25.   background-color: lightcyan;
  26. }
  28. table input[type="checkbox"] {
  29.   width: 20px;
  30.   height: 20px;
  31. }
  33. button {
  34.   width: 150px;
  35.   height: 30px;
  36.   outline: none;
  37.   border: none;
  38.   background-color: seagreen;
  39.   color: white;
  40.   letter-spacing: 5px;
  41. }
  42. button:hover {
  43.   background-color: coral;
  44.   cursor: pointer;
  45. }
  • js
  1. // 全选按钮
  2. var checkAllBtn = document.querySelector("#check-all");
  3. // 单个按钮
  4. var checkItemBtns = document.getElementsByName("itemId");
  6. // 给全选按钮添加事件
  7. checkAllBtn.addEventListener("change", checkAll, false);
  9. // checkAll()
  10. function checkAll(ev) {
  11.   var checkStatus = ev.target.checked;
  12.   // 遍历下面的所有的单个按钮,根据当前全选按钮的状态来设置他们
  13.   checkItemBtns.forEach(function (btn) {
  14.     // btn.checked = checkStatus ? true : false;
  15.     //简化
  16.     btn.checked = checkStatus;
  17.   });
  18. }
  20. // 给下面每个独立的复选框添加事件
  21. checkItemBtns.forEach(function (btn) {
  22.   // 根据每个复选框的状态,控制全选的状态
  23.   btn.addEventListener("change", checkAllStatus, false);
  24. });
  26. // checkAllStatus()
  27. function checkAllStatus(ev) {
  28.   var counter = 0;
  29.   checkItemBtns.forEach(function (btn) {
  30.     if (btn.checked) counter++;
  31.   });
  32.   // 设置全选按钮的状态
  33.   //   checkItemBtns.length === 5, 共5个商品
  34.   // counter: 当前选中的商品
  35.   //   checkAllBtn.checked = counter === checkItemBtns.length ? true : false;
  36.   checkAllBtn.checked = counter === checkItemBtns.length;
  37. }

4. 商品价格汇总

  • 这块是在之前基础上改的，因此只有html和css。
  • 将之前的数量input变成了可以修改的，另外增加了小记栏。
  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="static/css/check-all.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>
  17.             <input
  18.               type="checkbox"
  19.               name="checkAll"
  20.               id="check-all"
  21.               checked
  22.             /><label for="check-all">全选</label>
  23.           </th>
  24.           <th>ID</th>
  25.           <th>品名</th>
  26.           <th>单位</th>
  27.           <th>单价/元</th>
  28.           <th>数量</th>
  29.           <th>金额/元</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody>
  33.         <tr>
  34.           <td>
  35.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  36.           </td>
  37.           <td>SN-1010</td>
  38.           <td>MacBook Pro电脑</td>
  39.           <td>台</td>
  40.           <td>18999</td>
  41.           <td>
  42.             <input type="number" name="counter" value="1" min="1" step="1" />
  43.           </td>
  44.           <td></td>
  45.         </tr>
  46.         <tr>
  47.           <td>
  48.             <input type="checkbox" name="itemId" value="SN-1020" checked />
  49.           </td>
  50.           <td>SN-1020</td>
  51.           <td>iPhone手机</td>
  52.           <td>部</td>
  53.           <td>4999</td>
  54.           <td>
  55.             <input type="number" name="counter" value="2" min="1" step="1" />
  56.           </td>
  57.           <td></td>
  58.         </tr>
  59.         <tr>
  60.           <td>
  61.             <input type="checkbox" name="itemId" value="SN-1030" checked />
  62.           </td>
  63.           <td>SN-1030</td>
  64.           <td>智能AI音箱</td>
  65.           <td>只</td>
  66.           <td>399</td>
  67.           <td>
  68.             <input type="number" name="counter" value="3" min="1" step="1" />
  69.           </td>
  70.           <td></td>
  71.         </tr>
  72.         <tr>
  73.           <td>
  74.             <input type="checkbox" name="itemId" value="SN-1040" checked />
  75.           </td>
  76.           <td>SN-1040</td>
  77.           <td>SSD移动硬盘</td>
  78.           <td>个</td>
  79.           <td>888</td>
  80.           <td>
  81.             <input type="number" name="counter" value="4" min="1" step="1" />
  82.           </td>
  83.           <td></td>
  84.         </tr>
  85.         <tr>
  86.           <td>
  87.             <input type="checkbox" name="itemId" value="SN-1050" checked />
  88.           </td>
  89.           <td>SN-1050</td>
  90.           <td>黄山毛峰</td>
  91.           <td>斤</td>
  92.           <td>999</td>
  93.           <td>
  94.             <input type="number" name="counter" value="5" min="1" step="1" />
  95.           </td>
  96.           <td></td>
  97.         </tr>
  98.       </tbody>
  99.       <tfoot>
  100.         <tr>
  101.           <td colspan="5">总计:</td>
  102.           <td id="total-num"></td>
  103.           <td id="total-amount"></td>
  104.         </tr>
  105.       </tfoot>
  106.     </table>
  107.     <div style="width: 90%; margin: 10px auto;">
  108.       <button style="float: right; width: 100px;">结算</button>
  109.     </div>
  110.     <script src="static/js/check-all.js"></script>
  111.     <script src="static/js/auto-calculate.js"></script>
  112.   </body>
  113. </html>
  1. // 商品数量: 数组
  2. var counts = [];
  3. // 商品金额: 数组
  4. var amounts = [];
  5. // 商品单价: 数组
  6. var unitPrices = [];
  7. // 商品总数量
  8. var totalNum = 0;
  9. // 商品总金额
  10. var totalAmount = 0;
  12. // 获取商品数量控件<input:number>
  13. var numbers = document.querySelectorAll("input[type=number]");
  15. // 获取所有商品单价
  16. var prices = document.querySelectorAll("tbody > tr > td:nth-of-type(5)");
  18. // 1. 生成商品数量: 数组
  19. counts = getCounts(numbers);
  20. function getCounts(numbers) {
  21.   // Array.from(numbers): 将类数组,转为真正数组
  22.   // map()与forEach()功能相同, 只不过他返回一个新数组
  23.   return Array.from(numbers).map(function (item) {
  24.     return parseInt(item.value); // 转成数字
  25.   });
  26. }
  27. console.log(counts);
  29. // 2. 商品单价: 数组
  30. unitPrices = getUnitPrices(prices);
  31. function getUnitPrices(prices) {
  32.   return Array.from(prices).map(function (item) {
  33.     return parseInt(item.innerText);
  34.   });
  35. }
  36. console.log(unitPrices);
  38. // 3. 计算每个商品的金额
  39. amounts = getEveryAmount(counts, unitPrices);
  41. function getEveryAmount(counts, unitPrices) {
  42.   var result = [];
  43.   for (var i = 0; i < unitPrices.length; i++) {
  44.     // 金额 = 单价 * 数量
  45.     amount = unitPrices[i] * counts[i];
  46.     // 将这个商品金额添加到金额数组中
  47.     result.push(amount);
  48.   }
  49.   return result;
  50. }
  51. console.log(amounts);
  52. // 将每个商品金额渲染到页面中
  53. var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  54. // forEach(function (value,[ key, array]))
  55. subtotal.forEach(function (sub, index) {
  56.   sub.innerHTML = amounts[index];
  57. });
  59. // 4. 计算数量总和
  60. totalNum = numTotal(counts);
  61. // reduce()归并,最终将所有数组元素累加成一个值返回
  62. function numTotal(counts) {
  63.   return counts.reduce(function (prev, next) {
  64.     return (prev += next);
  65.   }, 0);
  66. }
  67. console.log(totalNum);
  68. // 将数量之和添加到页面中
  69. document.getElementById("total-num").innerText = totalNum;
  71. // 5 计算所有商品总额
  72. totalAmount = getTotalAmount(amounts);
  73. function getTotalAmount(amounts) {
  74.   return amounts.reduce(function (prev, next) {
  75.     return (prev += next);
  76.   }, 0);
  77. }
  78. console.log(totalAmount);
  79. // 将总金额添加到页面中
  80. document.getElementById("total-amount").innerText = totalAmount;
  82. // 6. 给每个数量控件添加change事件
  83. numbers.forEach(function (item) {
  84.   item.addEventListener("change", autoCalculate, false);
  85. });
  87. function autoCalculate(ev) {
  88.   // 更新总数量
  89.   counts = getCounts(numbers);
  90.   totalNum = numTotal(counts);
  91.   document.getElementById("total-num").innerText = totalNum;
  93.   // 更新每件商品的金额
  94.   var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  95.   subtotal.forEach(function (sub, index) {
  96.     sub.innerHTML = amounts[index];
  97.   });
  98.   amounts = getEveryAmount(counts, unitPrices);
  100.   // 更新总金额
  101.   totalAmount = getTotalAmount(amounts);
  102.   document.getElementById("total-amount").innerText = totalAmount;
  103. }

5. 作业

  1. 一键换肤, 全选全不选,二选一完成
  2. 购物车自动计算,添加全选全不选,单独选择时也能自动计算功能

html部分没有懂，主要是js部分改了下。将两个js文件放到了一个文件中。
结果如下：

  • my_calculate.js
  2. // 单个商品数量: 数组
  3. var counts = [];
  5. // 单个商品单价: 数组
  6. var unitPrices = [];
  8. // 单个商品小计金额: 数组
  9. var amounts = [];
  11. // 总商品数量
  12. var totalNum = 0;
  14. // 总商品金额
  15. var totalAmount = 0;
  17. // 获取商品数量控件<input:number>
  18. var numbers = document.querySelectorAll("input[type=number]");
  19. for (var i = 0; i < numbers.length; i++) {
  20.   numbers[i].index = i;
  21. }
  22. // for是为了给numbers赋予index方法，这样后面就可以用numbers的index来选择对应的checkbox了。
  23. // 见下面的counts计算部分。
  25. // 获取所有商品单价
  26. var prices = document.querySelectorAll("tbody > tr > td:nth-of-type(5)");
  29. // 全选按钮
  30. var checkAllBtn = document.querySelector("#check-all");
  31. // 单个按钮
  32. var checkItemBtns = document.getElementsByName("itemId");
  34. // checkAllStatus()
  35. counts = getCounts(numbers);
  37. function getCounts(numbers) {
  38.   return Array.from(numbers).map(function (item) {
  39.     if (checkItemBtns[item.index].checked) 
  40.     // 这块就用到了上面的index。false的判断是：.checked == false，一定要注意是双===
  41.     // 当然这个地方没用==，原因是== true就直接省略掉了。
  42.       return parseInt(item.value); // 转成数字
  43.       else return 0;  
  44.   });
  45. }
  47. // 给全选按钮添加事件
  48. checkAllBtn.addEventListener("change", checkAll, false);
  49. checkAllBtn.addEventListener("change", autoCalculate, false);
  50. // 一个事件添加多个function。下面的btn部分也有。
  52. // checkAll()
  53. function checkAll(ev) {
  54.   var checkStatus = ev.target.checked;
  55.   // 遍历下面的所有的单个按钮,根据当前全选按钮的状态来设置他们
  56.   checkItemBtns.forEach(function (btn) {
  57.     // btn.checked = checkStatus ? true : false;
  58.     //简化
  59.     btn.checked = checkStatus;
  60.   });
  61. }
  63. // 给下面每个独立的复选框添加事件
  64. checkItemBtns.forEach(function (btn) {
  65.   // 根据每个复选框的状态,控制全选的状态
  66.   btn.addEventListener("change", checkAllStatus, false);
  67.   btn.addEventListener("change", autoCalculate, false);
  68. });
  70. function checkAllStatus(ev) {
  71.   var counter = 0;
  72.   checkItemBtns.forEach(function (btn) {
  73.     if (btn.checked) counter++;
  74.      })
  75.   // 设置全选按钮的状态
  76.   //   checkItemBtns.length === 5, 共5个商品
  77.   // counter: 当前选中的商品
  78.   //   checkAllBtn.checked = counter === checkItemBtns.length ? true : false;
  79.   // 下面的为简写
  80.   checkAllBtn.checked = counter === checkItemBtns.length;
  81. }
  83. // 1. 生成商品数量: 数组（这块放到前面去了，主要是为了将number的返回跟checkbox的检验结合起来）
  84. // 这段很重要，需要先将类数组转化为真数组。
  85. // counts = getCounts(numbers);
  86. // function getCounts(numbers) {
  87. //   // Array.from(numbers): 将类数组,转为真正数组
  88. //   // map()与forEach()功能相同, 只不过他返回一个新数组
  89. //   return Array.from(numbers).map(function (item) {
  90. //     return parseInt(item.value); // 转成数字
  91. //   });
  92. // }
  93. // console.log(counts);
  95. // 2. 商品单价: 数组
  96. unitPrices = getUnitPrices(prices);
  97. function getUnitPrices(prices) {
  98.   return Array.from(prices).map(function (item) {
  99.     return parseInt(item.innerText);
  100.   });
  101. }
  102. console.log(unitPrices);
  105. // 3. 计算每个商品的金额
  106. amounts = getEveryAmount(counts, unitPrices);
  108. function getEveryAmount(counts, unitPrices) {
  109.   var result = [];
  110.   for (var i = 0; i < unitPrices.length; i++) {
  111.     // 金额 = 单价 * 数量
  112.     amount = unitPrices[i] * counts[i];
  113.     // 将这个商品金额添加到金额数组中
  114.     result.push(amount);
  115.   }
  116.   return result;
  117. }
  118. console.log(amounts);
  119. // 将每个商品金额渲染到页面中
  120. var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  121. // forEach(function (value,[ key, array]))
  122. subtotal.forEach(function (sub, index) {
  123.   sub.innerHTML = amounts[index];
  124. });
  126. // 4. 计算数量总和
  127. totalNum = numTotal(counts);
  128. // reduce()归并,最终将所有数组元素累加成一个值返回
  129. function numTotal(counts) {
  130.   return counts.reduce(function (prev, next) {
  131.     return (prev += next); // 最终返回结果都累加到了prev中
  132.   }, 0);
  133. }
  134. console.log(totalNum);
  135. // 将数量之和添加到页面中
  136. document.getElementById("total-num").innerText = totalNum;
  138. // 5 计算所有商品总额
  139. totalAmount = getTotalAmount(amounts);
  140. function getTotalAmount(amounts) {
  141.   return amounts.reduce(function (prev, next) {
  142.     return (prev += next);
  143.   }, 0);
  144. }
  145. console.log(totalAmount);
  146. // 将总金额添加到页面中
  147. document.getElementById("total-amount").innerText = totalAmount;
  149. // 6. 给每个数量控件添加change事件，这样数量改变的时候小计及总数就会发生变化
  150. numbers.forEach(function (item) {
  151.   item.addEventListener("change", autoCalculate, false);
  152. });
  154. function autoCalculate(ev) {
  155.   // 更新总数量
  156.   counts = getCounts(numbers);
  157.   totalNum = numTotal(counts);
  158.   document.getElementById("total-num").innerText = totalNum;
  160.   // 更新每件商品的金额
  161.   amounts = getEveryAmount(counts, unitPrices);
  162.   var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  163.   subtotal.forEach(function (sub, index) {
  164.     sub.innerHTML = amounts[index];
  165.   });
  167.   // 更新总金额
  168.   totalAmount = getTotalAmount(amounts);
  169.   document.getElementById("total-amount").innerText = totalAmount;
  170. }
上一条：第九章深入理解JS作用域下一条：问卷调查H5模板制作流程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多