search

博客列表 >一键换肤、购物车自动计算-js-45课8.21

一键换肤、购物车自动计算-js-45课8.21

希望
希望原创
2020年08月29日 14:02:51790浏览

一、一键换肤

1.建demo1.html,引入change-skin.css、change-skin.js

  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>

2.change-skin.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. }

3.change-skin.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. }

二、购物车自动计算，共4个文档

1.demo.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="check.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="SP-1" />
  36.           </td>
  37.           <td>SP-1</td>
  38.           <td>手机</td>
  39.           <td>部</td>
  40.           <td>1899</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="SP-2" />
  49.           </td>
  50.           <td>SP-2</td>
  51.           <td>电脑</td>
  52.           <td>台</td>
  53.           <td>4999</td>
  54.           <td>
  55.             <input type="number" name="counter" value="1" min="1" step="1" />
  56.           </td>
  57.           <td></td>
  58.         </tr>
  59.         <tr>
  60.           <td>
  61.             <input type="checkbox" name="itemId" value="SP-3" />
  62.           </td>
  63.           <td>SP-3</td>
  64.           <td>汽车</td>
  65.           <td>台</td>
  66.           <td>200000</td>
  67.           <td>
  68.             <input type="number" name="counter" value="1" min="1" step="1" />
  69.           </td>
  70.           <td></td>
  71.         </tr>
  72.       </tbody>
  73.       <tfoot>
  74.         <tr>
  75.           <td colspan="5" style="font-weight: 700;">总计:</td>
  76.           <td id="total-num"></td>
  77.           <td id="total-price"></td>
  78.         </tr>
  79.       </tfoot>
  80.     </table>
  81.     <div style="width: 90%; margin: 10px auto;">
  82.       <button style="float: right; width: 100px;">结算</button>
  83.     </div>
  84.     </td>
  85.     </tr>
  86.     </tfoot>
  87.     </table>    
  88.     <script src="select.js"></script>
  89.     <script src="calculate.js"></script>
  90.   </body>
  91. </html>

2.check.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. }

3.select.js

  1. /** @format */
  2. var selectAllBtn = document.querySelector("#check-all");
  3. //获取每个选项的复选框
  4. var itemBtns = document.querySelectorAll("input[name=itemId]");
  5. //获取所有单价
  6. prices = document.querySelectorAll("table>tbody>tr>td:nth-of-type(5)");
  7. //获取所有商品的数量
  8. numbers = document.querySelectorAll("table>tbody>tr>td>input[type=number]");
  9. // 获取商品单价数组
  10. var unitprice_array = getArrar(prices, "innerText");
  11. // 获取商品数量数组
  12. var counts = getArrar(numbers, "value");
  13. // 获得所有金额
  14. var sumPrices = document.querySelectorAll("tbody > tr > td:nth-of-type(7)");
  16. //初始化 默认为全选状态
  17. init();
  18. function init() {
  19.   selectAllBtn.checked = true;
  20.   checkAll();
  21. }
  22. //监听全选按钮状态
  23. selectAllBtn.addEventListener("change", checkAll, false);
  24. //添加状态刷新，当全选按钮状态改变时重新渲染页面
  25. selectAllBtn.addEventListener("change", refresh, false);
  26. function refresh() {
  27.   autoCalculate();
  28. }
  29. //设置复选框的取消和选中状态并添加默认值
  30. function checkAll() {
  31.   itemBtns.forEach(function (btn) {
  32.     btn.checked = selectAllBtn.checked;
  33.     if (!selectAllBtn.checked) {
  34.       btn.parentNode.parentNode.children[5].children.counter.value = 0;
  35.     } else {
  36.       btn.parentNode.parentNode.children[5].children.counter.value = 1;
  37.     }
  38.   });
  39. }
  40. itemBtns.forEach(function (btn) {
  41.   btn.addEventListener("change", checkAllStatus, false);
  42. });
  43. function checkAllStatus() {
  44.   //获取兄弟节点value值,实现取消选中自动重新计算
  45.   item_num = this.parentNode.parentNode.querySelector("td>input[type=number]")
  46.     .value;
  47.   if (this.checked == false && item_num > 0) {
  48.     this.parentNode.parentNode.querySelector("td>input[type=number]").value = 0;
  49.   } else {
  50.     this.parentNode.parentNode.querySelector("td>input[type=number]").value = 1;
  51.   }
  52.   changeStatus();
  53.   autoCalculate();
  54. }
  55. //设置复选框状态
  56. function changeStatus() {
  57.   var num = 0;
  58.   itemBtns.forEach(function (btn) {
  59.     if (btn.checked == true) {
  60.       num++;
  61.     }
  62.   });
  63.   // console.log(num);
  64.   selectAllBtn.checked = itemBtns.length == num;
  65. }
  66. //将传入伪数组转换为新的数组
  67. function getArrar(array, attr_name) {
  68.   return Array.from(array).map((item) => parseInt(item[attr_name]));
  69. }
  70. //每个项目的金额
  71. var amounts = getAmounts(unitprice_array, counts);
  72. //将每个项目的金额渲染到表格中
  73. let subtotal = document.querySelectorAll("tbody>tr>td:last-of-type");
  74. //forEach的第二个参数为当前item的索引
  75. subtotal.forEach((item, index) => (item.innerText = amounts[index]));
  76. //计算每个项目的金额，返回一个新的数组
  77. function getAmounts(unitprice_array, counts) {
  78.   let res = [];
  79.   for (var i = 0; i < counts.length; i++) {
  80.     let amount = unitprice_array[i] * counts[i];
  81.     res.push(amount);
  82.   }
  83.   return res;
  84. }
  85. //计算总金额并渲染到页面
  86. var totalNum = (document.querySelector("#total-num").innerText = getSum(
  87.   counts
  88. ));
  89. var totalAmount = (document.querySelector("#total-price").innerText = getSum(
  90.   amounts
  91. ));
  92. //使用reduce方法计算数组每项的和
  93. function getSum(array) {
  94.   return array.reduce((total, num) => total + num, 0);
  95. }
  96. //为数量控件添加change事件
  97. numbers.forEach((item) => item.addEventListener("input", autoCalculate));
  98. numbers.forEach((item) => item.addEventListener("input", autoSelect));
  99. //当input[type=number]值改变时设置复选框选中，重新计算金额
  100. function autoSelect() {
  101.   this.parentNode.parentNode.querySelector(
  102.     "td>input[name=itemId]"
  103.   ).checked = true;
  104.   // 重新计算所有被选中复选框的数量
  105.   changeStatus();
  106. }
  107. //自动计算函数
  108. function autoCalculate() {
  109.   counts = getArrar(numbers, "value");
  110.   amounts = getAmounts(unitprice_array, counts);
  111.   subtotal.forEach((item, index) => (item.innerText = amounts[index]));
  112.   totalNum = document.querySelector("#total-num").innerText = getSum(counts);
  113.   totalAmount = document.querySelector("#total-price").innerText = getSum(
  114.     amounts
  115.   );
  116. }

4.calculate.js

  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.     // 拿到里面文本的值innerText
  34.     return parseInt(item.innerText);
  35.   });
  36. }
  37. console.log(unitPrices);
  39. // 3. 计算每个商品的金额之和
  40. amounts = getEveryAmount(counts, unitPrices);
  42. function getEveryAmount(counts, unitPrices) {
  43.   var result = [];
  44.   for (var i = 0; i < unitPrices.length; i++) {
  45.     // 金额 = 单价 * 数量
  46.     amount = unitPrices[i] * counts[i];
  47.     // 将这个商品金额添加到金额数组中
  48.     result.push(amount);
  49.   }
  50.   return result;
  51. }
  52. console.log(amounts);
  53. // 将每个商品金额渲染到页面中
  54. var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  55. // forEach(function (value,[ key, array]))
  56. subtotal.forEach(function (sub, index) {
  57.   sub.innerHTML = amounts[index];
  58. });
  60. // 4. 计算数量总和
  61. totalNum = numTotal(counts);
  62. // reduce()归并,最终将所有数组元素累加成一个值返回
  63. function numTotal(counts) {
  64.   return counts.reduce(function (prev, next) {
  65.     // 累加
  66.     return (prev += next);
  67.   }, 0);
  68. }
  69. console.log(totalNum);
  70. // 将数量之和添加到页面中
  71. document.getElementById("total-num").innerText = totalNum;
  73. // 5 计算所有商品总金额
  74. totalAmount = getTotalAmount(amounts);
  75. function getTotalAmount(amounts) {
  76.   return amounts.reduce(function (prev, next) {
  77.     return (prev += next);
  78.   }, 0);
  79. }
  80. console.log(totalAmount);
  81. // 将总金额添加到页面中
  82. document.getElementById("total-price").innerText = totalAmount;
  84. // 6. 给每个数量控件添加change事件
  85. numbers.forEach(function (item) {
  86.   item.addEventListener("change", autoCalculate, false);
  87. });
  89. function autoCalculate(ev) {
  90.   // 更新总数量
  91.   counts = getCounts(numbers);
  92.   totalNum = numTotal(counts);
  93.   document.getElementById("total-num").innerText = totalNum;
  95.   // 更新每件商品的金额
  96.   var subtotal = document.querySelectorAll("tbody > tr > td:last-of-type");
  97.   subtotal.forEach(function (sub, index) {
  98.     sub.innerHTML = amounts[index];
  99.   });
  100.   // 每个商品的金额之和
  101.   amounts = getEveryAmount(counts, unitPrices);
  103.   // 更新总金额
  104.   totalAmount = getTotalAmount(amounts);
  105.   document.getElementById("total-price").innerText = totalAmount;
  106. }

  • 总结：
  • 横向计算商品数量*单价，得到一种商品总金额
  • 竖向计算所有商品总数量和总金额
  • 添加数量增加的事件，更新总数量，总金额到页面中去
上一条：问卷调查H5模板制作流程下一条：初学jQuery
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多