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

搜索
博主信息
博文 26
粉絲 2
評論 0
訪問量 30352
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS實現(xiàn)購物車自動結算和背景切換
leverWang
原創(chuàng)
1051人瀏覽過
背景切換

change-bg.js

  1. var bg_item = document.querySelectorAll(".bg-items>.item");
  2. bg_item.forEach(function (item) {
  3.   item.addEventListener("click", change_bg, false);
  4. });
  6. function change_bg(e) {
  7.   url = e.target.src;
  8.   document.body.style.cssText ="background: url(" + url + ") no-repeat center top;";
  9. }
購物車自動結算

select-all.js

  1. /** @format */
  3. var selectAllBtn = document.querySelector("#check-all");
  4. //獲取每個選項的復選框
  5. var itemBtns = document.querySelectorAll("input[name=itemId]");
  6. //獲取所有單價
  7. prices = document.querySelectorAll("table>tbody>tr>td:nth-of-type(5)");
  8. //獲取所有商品的數(shù)量
  9. numbers = document.querySelectorAll("table>tbody>tr>td>input[type=number]");
  10. // 獲取商品單價數(shù)組
  11. var unitprice_array = getArrar(prices, "innerText");
  12. // 獲取商品數(shù)量數(shù)組
  13. var counts = getArrar(numbers, "value");
  14. //初始化 默認為全選狀態(tài)
  15. init();
  16. function init() {
  17.   selectAllBtn.checked = true;
  18.   checkAll();
  19. }
  20. //監(jiān)聽全選按鈕狀態(tài)
  21. selectAllBtn.addEventListener("change", checkAll, false);
  22. //添加狀態(tài)刷新，當全選按鈕狀態(tài)改變時重新渲染頁面
  23. selectAllBtn.addEventListener("change", refresh, false);
  24. function refresh() {
  25.   autoCalculate();
  26. }
  27. //設置復選框的取消和選中狀態(tài)并添加默認值
  28. function checkAll() {
  29.   itemBtns.forEach(function (btn) {
  30.     btn.checked = selectAllBtn.checked;
  31.     if (!selectAllBtn.checked) {
  32.       btn.parentNode.parentNode.children[5].children.counter.value = 0;
  33.     } else {
  34.       btn.parentNode.parentNode.children[5].children.counter.value = 1;
  35.     }
  36.   });
  37. }
  39. itemBtns.forEach(function (btn) {
  40.   btn.addEventListener("change", checkAllStatus, false);
  41. });
  42. function checkAllStatus() {
  43.   //獲取兄弟節(jié)點value值,實現(xiàn)取消選中自動重新計算
  44.   item_num = this.parentNode.parentNode.querySelector("td>input[type=number]").value;
  45.   if (this.checked == false && item_num > 0) {
  46.     this.parentNode.parentNode.querySelector("td>input[type=number]").value = 0;
  47.   } else {
  48.     this.parentNode.parentNode.querySelector("td>input[type=number]").value = 1;
  49.   }
  50.   changeStatus();
  51.   autoCalculate();
  52. }
  54. //設置復選框狀態(tài)
  55. function changeStatus() {
  56.   var num = 0;
  57.   itemBtns.forEach(function (btn) {
  58.     if (btn.checked == true) {
  59.       num++;
  60.     }
  61.   });
  62.   // console.log(num);
  63.   selectAllBtn.checked = itemBtns.length == num;
  64. }
  66. //將傳入偽數(shù)組轉換為新的數(shù)組
  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的第二個參數(shù)為當前item的索引
  75. subtotal.forEach((item, index) => (item.innerText = amounts[index]));
  76. //計算每個項目的金額，返回一個新的數(shù)組
  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(counts));
  87. var totalAmount = (document.querySelector("#total-amount").innerText = getSum(amounts));
  88. //使用reduce方法計算數(shù)組每項的和
  89. function getSum(array) {
  90.   return array.reduce((total, num) => total + num, 0);
  91. }
  92. //為數(shù)量控件添加change事件
  93. numbers.forEach((item) => item.addEventListener("input", autoCalculate));
  94. numbers.forEach((item) => item.addEventListener("input", autoSelect));
  95. //當input[type=number]值改變時設置復選框選中，重新計算金額
  96. function autoSelect() {
  97.   this.parentNode.parentNode.querySelector(
  98.     "td>input[name=itemId]"
  99.   ).checked = true;
  100.   // 重新計算所有被選中復選框的數(shù)量
  101.   changeStatus();
  102. }
  103. //自動計算函數(shù)
  104. function autoCalculate() {
  105.   counts = getArrar(numbers, "value");
  106.   amounts = getAmounts(unitprice_array, counts);
  107.   subtotal.forEach((item, index) => (item.innerText = amounts[index]));
  108.   totalNum = document.querySelector("#total-num").innerText = getSum(counts);
  109.   totalAmount = document.querySelector("#total-amount").innerText = getSum(amounts);
  110. }

index.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="css/check-all.css" />
  8. </head>
  9. <body>
  10.   <div class="bg-items">
  11.     <div class='item'> <img src="img/1.jpg" alt=""></div>
  12.     <div class='item'><img src="img/2.jpg" alt=""></div>
  13.     <div class='item'> <img src="img/3.jpg" alt=""></div>
  14.   </div>
  15.   <table>
  16.     <caption>
  17.       購物車
  18.     </caption>
  19.     <thead>
  20.       <tr>
  21.         <th>
  22.           <input type="checkbox" name="checkAll" id="check-all" /><label
  23.             for="check-all">全選</label>
  24.         </th>
  25.         <th>ID</th>
  26.         <th>品名</th>
  27.         <th>單位</th>
  28.         <th>單價/元</th>
  29.         <th>數(shù)量</th>
  30.         <th>金額/元</th>
  31.       </tr>
  32.     </thead>
  33.     <tbody>
  34.       <tr>
  35.         <td>
  36.           <input type="checkbox" name="itemId" value="SN-1010" />
  37.         </td>
  38.         <td>SN-1010</td>
  39.         <td>MacBook Pro電腦</td>
  40.         <td>臺</td>
  41.         <td>18999</td>
  42.         <td>
  43.           <input type="number" name="counter" value="1" min="1" step="1" />
  44.         </td>
  45.         <td></td>
  46.       </tr>
  47.       <tr>
  48.         <td>
  49.           <input type="checkbox" name="itemId" value="SN-1020" />
  50.         </td>
  51.         <td>SN-1020</td>
  52.         <td>iPhone手機</td>
  53.         <td>部</td>
  54.         <td>4999</td>
  55.         <td>
  56.           <input type="number" name="counter" value="2" min="1" step="1" />
  57.         </td>
  58.         <td></td>
  59.       </tr>
  60.       <tr>
  61.         <td>
  62.           <input type="checkbox" name="itemId" value="SN-1030" />
  63.         </td>
  64.         <td>SN-1030</td>
  65.         <td>智能AI音箱</td>
  66.         <td>只</td>
  67.         <td>399</td>
  68.         <td>
  69.           <input type="number" name="counter" value="3" min="1" step="1" />
  70.         </td>
  71.         <td></td>
  72.       </tr>
  73.       <tr>
  74.         <td>
  75.           <input type="checkbox" name="itemId" value="SN-1040" />
  76.         </td>
  77.         <td>SN-1040</td>
  78.         <td>SSD移動硬盤</td>
  79.         <td>個</td>
  80.         <td>888</td>
  81.         <td>
  82.           <input type="number" name="counter" value="4" min="1" step="1" />
  83.         </td>
  84.         <td></td>
  85.       </tr>
  86.       <tr>
  87.         <td>
  88.           <input type="checkbox" name="itemId" value="SN-1050" />
  89.         </td>
  90.         <td>SN-1050</td>
  91.         <td>黃山毛峰</td>
  92.         <td>斤</td>
  93.         <td>999</td>
  94.         <td>
  95.           <input type="number" name="counter" value="5" min="1" step="1" />
  96.         </td>
  97.         <td></td>
  98.       </tr>
  99.     </tbody>
  100.     <tfoot>
  101.       <tr>
  102.         <td colspan="5">總計:</td>
  103.         <td id="total-num"></td>
  104.         <td id="total-amount"></td>
  105.       </tr>
  106.       <tr>
  107.         <td colspan="7" style="border:none;">
  108.           <div style="  margin: 10px auto;">
  109.             <button style="float: right; width: 100px;">結算</button>
  110.           </div>
  111.         </td>
  112.       </tr>
  113.     </tfoot>
  114.   </table>
  115.   <script src="js/change-bg.js"></script>
  116.   <script src="js/select-all.js"></script>
  117. </body>
  118. </html>
總結：通過這個小練習，進一步熟悉了前面的知識，嘗試使用了一下箭頭函數(shù)來簡化代碼，在寫JS的時候發(fā)現(xiàn)思路很重要，只要思路清晰，只需要使用對應的JS來一步步實現(xiàn)。
批改老師：天蓬老師天蓬老師

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

老師批語：有沒有想到, 換種思路來實現(xiàn)同樣的功能呢, 是不是脫離了教學代碼就寫不出來呢, 多看看其它的源碼是有好處的
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學