Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS实战练习：选项卡、在线相册、轮播图、购物车
Blogger Information
Blog 40
fans 0
comment 0
visits 27874
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS实战练习：选项卡、在线相册、轮播图、购物车
初见
Original
603 people have browsed it

JS实战练习及部分知识回顾

选项卡 (css部分省略)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>选项卡</title>
  8.     <link rel="stylesheet" href="css/css.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 选项卡 -->
  12.     <div class="tabs">
  13.       <!-- 导航部分-->
  14.       <ul class="tab" onmouseover="show(event)">
  15.         <!-- onclick 点击 onmouseover鼠标滑动 -->
  16.         <li class="active" data-index="1">热点</li>
  17.         <li data-index="2">推荐</li>
  18.         <li data-index="3">最新</li>
  19.       </ul>
  20.       <!-- 对应的详情 -->
  21.       <ul class="item active" data-index="1">
  22.         <li><a href="">最新的热门新闻就是焦点新闻1</a></li>
  23.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  24.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  25.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  26.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  27.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  28.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  29.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  30.       </ul>
  31.       <ul class="item" data-index="2">
  32.         <li><a href="">最新的热门新闻就是焦点新闻2</a></li>
  33.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  34.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  35.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  36.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  37.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  38.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  39.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  40.       </ul>
  41.       <ul class="item" data-index="3">
  42.         <li><a href="">最新的热门新闻就是焦点新闻3</a></li>
  43.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  44.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  45.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  46.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  47.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  48.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  49.         <li><a href="">最新的热门新闻就是焦点新闻</a></li>
  50.       </ul>
  51.     </div>
  52.     <script>
  53.       // 选项卡js
  54.       // 知识点 数组过滤器 filter()
  56.       //   const arr = [2, 5, 2, 10, 8, 50, 3, 6, 90, 7, 1];
  57.       //   const res = [];
  58.       //取大于等于5的数据，传统方式
  59.       //   for (let i = 0; i < arr.length; i++) {
  60.       //     if (arr[i] >= 5) {
  61.       //       res.push(arr[i]);
  62.       //     }
  63.       //   }
  64.       //   console.log(res);
  65.       // filter 返回判断结果为true的函数
  66.       //   console.log(arr.filter(item => item >= 5));
  67.       function show(ev) {
  68.         // console.log(ev.currentTarget);
  69.         // console.log(ev.target);
  70.         const ul = ev.currentTarget;
  71.         const li = ev.target;
  72.         // 1、控制顶部导航的显示
  73.         //添加之前，去掉高亮的导航
  74.         //console.log([...ul.children]); // 查看发现它是一个元素结合（类数组） 加上...转为数组
  75.         //遍历这个数组即可forEach
  76.         [...ul.children].forEach(li => li.classList.remove("active"));
  77.         li.classList.add("active");
  78.         //2、根据顶部导航的显示，显示对应的内容
  79.         const uls = document.querySelectorAll(".item");
  80.         uls.forEach(li => li.classList.remove("active"));
  82.         //判断依据 data-index 对应相等
  83.         // let a = [...uls].filter(ul => ul.dataset.index === li.dataset.index)[0];
  84.         // console.log(a.classList.add("active"));
  85.         [...uls]
  86.           .filter(ul => ul.dataset.index === li.dataset.index)[0]
  87.           .classList.add("active");
  88.       }
  89.     </script>
  90.   </body>
  91. </html>

在线相册 （忽略css)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>在线相册</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <ul class="container">
  12.       <!-- 所有相片 js动态创建 -->
  13.     </ul>
  14.     <script>
  15.       //array.reduce(前一个成员，当前成员) 最后一个参数是结果的初值 数组的归并函数
  16.       //   let a = [1, 2, 3, 4, 5].reduce(function (prev, curr) {
  17.       //     console.log(prev, curr);
  18.       //     return prev + curr;
  19.       //   });
  21.       //   let a = [1, 2, 3, 4, 5].reduce((prev, curr) => prev + curr);
  22.       //   console.log(a);
  23.       // 1、动态生成图片
  24.       const ul = document.querySelector(".container");
  25.       //console.log(ul);
  26.       const imgs = [
  27.         "images/img_1.jpg",
  28.         "images/img_2.jpg",
  29.         "images/img_3.jpg",
  30.         "images/img_4.jpg",
  31.         "images/img_5.jpg",
  32.         "images/img_6.jpg",
  33.         "images/img_7.jpg",
  34.         "images/img_8.jpg",
  35.       ];
  36.       //load()当页面加载成功立即执行
  37.       window.onload = showImgs;
  38.       //声明showImgs
  39.       function showImgs() {
  40.         let res = imgs.reduce((prev, curr) => {
  41.           let tpl = `
  42.             <li>
  43.             <img src="${curr}" />
  44.             <div>
  45.                 <button onclick="prev(this.parentNode.parentNode)">向前</button>
  46.                 <button onclick="next(this.parentNode.parentNode)">向后</button>
  47.                 <button onclick="del(this.parentNode.parentNode)">删除</button>
  48.             </div>
  49.             </li>
  50.               `;
  51.           return prev + tpl;
  52.         }, "");
  53.         //console.log(res);
  54.         ul.insertAdjacentHTML("afterbegin", res);
  55.       }
  56.       //删除
  57.       function del(ele) {
  58.         return confirm("是否删除？") ? ele.remove() : false;
  59.       }
  60.       //向前
  61.       function prev(ele) {
  62.         if (ele.previousElementSibling === null) {
  63.           alert("已经是第一张");
  64.           return false;
  65.         }
  66.         let prevNode = ele.previousElementSibling;
  67.         ul.insertBefore(ele, prevNode);
  68.         //console.log(prevNode);
  69.       }
  70.       //向后
  71.       function next(ele) {
  72.         if (ele.nextElementSibling === null) {
  73.           alert("已经是最后一张");
  74.           return false;
  75.         }
  76.         let nextNode = ele.nextElementSibling;
  77.         ul.insertBefore(nextNode, ele);
  78.         //console.log(prevNode);
  79.       }
  80.     </script>
  81.   </body>
  82. </html>

轮播图

轮播图

  • html部分
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 轮播图    -->
  12.     <div class="container">
  13.       <!-- 图片组 -->
  14.       <div class="img-group"></div>
  15.       <!-- 和图片对应数量的按钮 -->
  16.       <div class="btn-group"></div>
  17.       <!-- 向前和向后翻页 -->
  18.       <div class="skip">
  19.         <!-- javascript:; -->
  20.         <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
  21.         <a class="next" href="" onclick="nextImg(event)">&gt;</a>
  22.       </div>
  23.     </div>
  24.     <!-- <ul class="list"></ul> -->
  25.     <script src="banner.js"></script>
  26.   </body>
  27. </html>
  • banner.js
  1. //文档片段
  2. // const ul = document.querySelector(".list");
  3. // // 文档碎片
  4. // const frag = document.createDocumentFragment();
  5. // for (let i = 0; i < 100; i++) {
  6. //   const li = document.createElement("li");
  7. //   li.textContent = "item" + (i + 1);
  8. //   frag.append(li);
  9. // }
  10. // ul.append(frag);
  11. const banner = [
  12.   "images/banner_1.jpg",
  13.   "images/banner_2.jpg",
  14.   "images/banner_3.jpg",
  15.   "images/banner_4.jpg",
  16. ];
  17. //图片组
  18. const imgGroup = document.querySelector(".container > .img-group");
  20. //按钮组
  21. const btnGroup = document.querySelector(".container > .btn-group");
  23. // 当页面加载成功时，将所有图片和按钮全部渲染
  25. window.onload = () => {
  26.   // 生成所有图片
  27.   createImgs(imgGroup, banner.length);
  28.   //生成图片对应的按钮
  29.   createBtns(btnGroup, banner.length);
  30. };
  31. function createImgs(parent, length) {
  32.   const frag = document.createDocumentFragment();
  33.   for (let i = 0; i < length; i++) {
  34.     const img = document.createElement("img");
  35.     //添加索引
  36.     img.dataset.index = `${i + 1}`;
  37.     if (i === 0) img.classList.add("active");
  38.     img.src = banner[i];
  39.     frag.append(img);
  40.   }
  41.   parent.append(frag);
  42. }
  43. function createBtns(parent, length) {
  44.   const frag = document.createDocumentFragment();
  45.   for (let i = 0; i < length; i++) {
  46.     const span = document.createElement("span");
  47.     //添加索引
  48.     span.dataset.index = `${i + 1}`;
  49.     if (i === 0) span.classList.add("active");
  50.     span.onclick = showImgs;
  51.     frag.append(span);
  52.   }
  53.   parent.append(frag);
  54. }
  55. function showImgs(ev) {
  56.   //获取所有图片和按钮
  57.   const imgArr = imgGroup.querySelectorAll("img");
  58.   const btnArr = btnGroup.querySelectorAll("span");
  59.   console.log(imgArr, btnArr);
  60.   //根据图片激活状态，显示对应的图片
  61.   btnArr.forEach(btn => btn.classList.remove("active"));
  62.   imgArr.forEach(img => img.classList.remove("active"));
  63.   ev.target.classList.add("active");
  64.   // 添加根据按钮和图片data-index属性的值 匹配上在激活
  65.   imgArr.forEach(img => {
  66.     if (ev.target.dataset.index === img.dataset.index)
  67.       img.classList.add("active");
  68.   });
  69. }
  70. //翻页
  71. // 向前
  72. function prevImg(ev) {
  73.   ev.preventDefault(); // 禁用a标签的默认跳转行为
  74.   //1、当前图片和当前按钮
  75.   const currentImg = imgGroup.querySelector("img.active");
  76.   const currentBtn = btnGroup.querySelector("span.active");
  77.   //2、取消当前图片和当前按钮的激活状态
  78.   currentImg.classList.remove("active");
  79.   currentBtn.classList.remove("active");
  80.   //3、取得当前图片和按钮的前一个兄弟节点
  81.   const prevImg = currentImg.previousElementSibling;
  82.   const prevBtn = currentBtn.previousElementSibling;
  83.   //
  84.   //4、如果存在前一个兄弟，就设置它为激活状态
  85.   if (prevImg !== null && prevBtn !== null) {
  86.     prevBtn.classList.add("active");
  87.     prevImg.classList.add("active");
  88.   } else {
  89.     imgGroup.lastElementChild.classList.add("active");
  90.     btnGroup.lastElementChild.classList.add("active");
  91.   }
  92. }
  93. // 向后
  94. function nextImg(ev) {
  95.   ev.preventDefault(); // 禁用a标签的默认跳转行为
  96.   //1、当前图片和当前按钮
  97.   const currentImg = imgGroup.querySelector("img.active");
  98.   const currentBtn = btnGroup.querySelector("span.active");
  99.   //2、取消当前图片和当前按钮的激活状态
  100.   currentImg.classList.remove("active");
  101.   currentBtn.classList.remove("active");
  102.   //3、取得当前图片和按钮的前一个兄弟节点
  103.   const nextImg = currentImg.nextElementSibling;
  104.   const nextBtn = currentBtn.nextElementSibling;
  105.   //
  106.   //4、如果存在前一个兄弟，就设置它为激活状态
  107.   if (nextImg !== null && nextBtn !== null) {
  108.     nextBtn.classList.add("active");
  109.     nextImg.classList.add("active");
  110.   } else {
  111.     imgGroup.firstElementChild.classList.add("active");
  112.     btnGroup.firstElementChild.classList.add("active");
  113.   }
  114. }
  115. //每2s自送切换到下一个，使用setInterval 执行间歇事件
  116. // setInterval(() => {
  117. //   //1、当前图片和当前按钮
  118. //   const currentImg = imgGroup.querySelector("img.active");
  119. //   const currentBtn = btnGroup.querySelector("span.active");
  120. //   //2、取消当前图片和当前按钮的激活状态
  121. //   currentImg.classList.remove("active");
  122. //   currentBtn.classList.remove("active");
  123. //   //3、取得当前图片和按钮的前一个兄弟节点
  124. //   const nextImg = currentImg.nextElementSibling;
  125. //   const nextBtn = currentBtn.nextElementSibling;
  126. //   //
  127. //   //4、如果存在前一个兄弟，就设置它为激活状态
  128. //   if (nextImg !== null && nextBtn !== null) {
  129. //     nextBtn.classList.add("active");
  130. //     nextImg.classList.add("active");
  131. //   } else {
  132. //     imgGroup.firstElementChild.classList.add("active");
  133. //     btnGroup.firstElementChild.classList.add("active");
  134. //   }
  135. // }, 2000);
  137. //简单写法
  138. //获取翻页到下一页的按钮
  139. const cBtn = document.querySelector(".container > .skip > .next");
  140. //创建一个自定义事件
  141. const myclick = new Event("click");
  142. //间歇性执行自定义事件
  143. setInterval(() => cBtn.dispatchEvent(myclick), 2000);

购物车

购物车

  • html部分
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>购物车</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <table>
  12.       <caption>
  13.         我的购物车
  14.       </caption>
  15.       <thead>
  16.         <th>
  17.           <input type="checkbox" name="checkAll" id="check-all" checked /><label
  18.             for="check-all"
  19.             >全选</label
  20.           >
  21.         </th>
  22.         <th>图片</th>
  23.         <th>品名</th>
  24.         <th>单位</th>
  25.         <th>单价/元</th>
  26.         <th>数量</th>
  27.         <th>金额/元</th>
  28.       </thead>
  30.       <tbody>
  31.         <tr>
  32.           <td>
  33.             <input
  34.               type="checkbox"
  35.               name="item"
  36.               class="item"
  37.               value="SN-1020"
  38.               checked
  39.             />
  40.           </td>
  41.           <td>
  42.             <a href=""><img src="images/p1.png" alt="" /></a>
  43.           </td>
  44.           <td>JavaScript权威指南(第七版)</td>
  45.           <td>本</td>
  46.           <td class="price">100</td>
  47.           <td><input type="number" min="1" value="1" /></td>
  48.           <td class="amount">0</td>
  49.         </tr>
  50.         <tr>
  51.           <td>
  52.             <input
  53.               type="checkbox"
  54.               name="item"
  55.               class="item"
  56.               value="SN-1020"
  57.               checked
  58.             />
  59.           </td>
  60.           <td>
  61.             <a href=""><img src="images/p2.png" alt="" /></a>
  62.           </td>
  63.           <td>JavaScript高级程序设计(第四版)</td>
  64.           <td>本</td>
  65.           <td class="price">129</td>
  66.           <td><input type="number" min="1" value="1" /></td>
  67.           <td class="amount">0</td>
  68.         </tr>
  69.         <tr>
  70.           <td>
  71.             <input
  72.               type="checkbox"
  73.               name="item"
  74.               class="item"
  75.               value="SN-1030"
  76.               checked
  77.             />
  78.           </td>
  79.           <td>
  80.             <a href=""><img src="images/p3.png" alt="" /></a>
  81.           </td>
  82.           <td>JavaScript忍者秘籍(第二版)</td>
  83.           <td>台</td>
  84.           <td class="price">99</td>
  85.           <td><input type="number" min="1" value="1" /></td>
  86.           <td class="amount">0</td>
  87.         </tr>
  88.         <tr>
  89.           <td>
  90.             <input
  91.               type="checkbox"
  92.               name="item"
  93.               class="item"
  94.               value="SN-1040"
  95.               checked
  96.             />
  97.           </td>
  98.           <td>
  99.             <a href=""><img src="images/p4.png" alt="" /></a>
  100.           </td>
  101.           <td>ThinkPad X1 Carbon 2021</td>
  102.           <td>台</td>
  103.           <td class="price">12999</td>
  104.           <td><input type="number" min="1" value="1" /></td>
  105.           <td class="amount">0</td>
  106.         </tr>
  107.         <tr>
  108.           <td>
  109.             <input
  110.               type="checkbox"
  111.               name="item"
  112.               class="item"
  113.               value="SN-1050"
  114.               checked
  115.             />
  116.           </td>
  117.           <td>
  118.             <a href=""><img src="images/p5.png" alt="" /></a>
  119.           </td>
  120.           <td>MacBook Pro 16 10代i7 16G 512G</td>
  121.           <td>台</td>
  122.           <td class="price">23800</td>
  123.           <td><input type="number" min="1" value="1" /></td>
  124.           <td class="amount">0</td>
  125.         </tr>
  126.       </tbody>
  127.       <tfoot>
  128.         <tr>
  129.           <td colspan="5">总计:</td>
  130.           <td id="sum">0</td>
  131.           <td id="total-amount">0</td>
  132.         </tr>
  133.       </tfoot>
  134.     </table>
  135.     <div style="width: 90%; margin: 10px auto">
  136.       <button style="float: right; width: 100px">结算</button>
  137.     </div>
  138.     <script src="cart.js"></script>
  139.   </body>
  140. </html>
  • 复选框和自动计算数值变化(js)[不完整]
  1. const checkAll = document.querySelector("#check-all");
  2. const checkItems = document.getElementsByName("item");
  3. //全选复选框
  4. checkAll.onchange = ev =>
  5.   checkItems.forEach(item => (item.checked = ev.target.checked));
  6. checkItems.forEach(
  7.   item =>
  8.     (item.onchange = () =>
  9.       (checkAll.checked = [...checkItems].every(item => item.checked)))
  10. );
  11. //自动计算 所有的计算都是基于数量的变化
  12. const numInput = document.querySelectorAll('input[type="number"]');
  13. numInput.forEach(function (input) {
  14.   input.onchange = autoCalculate;
  15. });
  16. function autoCalculate() {
  17.   const numbers = document.querySelectorAll('input[type="number"]');
  18.   const numArr = [...numbers].map(function (num) {
  19.     return num.value * 1;
  20.   });
  21.   const prices = document.querySelectorAll("tbody .price");
  22.   const priceArr = [...prices].map(function (num) {
  23.     return num.textContent * 1;
  24.   });
  25.   //console.log(priceArr);
  26.   //计算金额
  27.   const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
  28.     return prev.map(function (item, key) {
  29.       return item * curr[key];
  30.     });
  31.   });
  32.   //console.log(amountArr);
  33.   let tatal = amountArr.reduce(function (prev, curr) {
  34.     return prev + curr;
  35.   });
  36.   let sum = numArr.reduce(function (prev, curr) {
  37.     return prev + curr;
  38.   });
  39.   //渲染
  40.   document.querySelectorAll(".amount").forEach(function (item, index) {
  41.     item.textContent = amountArr[index];
  42.   });
  43.   document.querySelector("#total-amount").textContent = tatal;
  44.   document.querySelector("#sum").textContent = sum;
  45. }
  46. window.onload = autoCalculate;
  • 改进js
  1. //全选复选框
  2. const checkAll = document.querySelector("#check-all");
  3. const checkItems = document.getElementsByName("item");
  4. //设置一个空数值用来接收checkItems checked的值 为true时为1
  5. let isChecked = [];
  6. checkItems.forEach(item => isChecked.push(item.checked === true ? 1 : 0));
  8. //自动计算 所有的计算都是基于数量的变化
  9. const numInput = document.querySelectorAll('input[type="number"]');
  10. numInput.forEach(function (input) {
  11.   input.onchange = autoCalculate;
  12. });
  13. function autoCalculate() {
  14.   const numbers = document.querySelectorAll('input[type="number"]');
  15.   const numArr = [...numbers].map(function (num) {
  16.     return num.value * 1;
  17.   });
  18.   const sumArr = [numArr, isChecked].reduce(function (prev, curr) {
  19.     return prev.map(function (item, key) {
  20.       return item * curr[key];
  21.     });
  22.   });
  23.   //console.log(numArr);
  24.   const prices = document.querySelectorAll("tbody .price");
  25.   const priceArr = [...prices].map(function (num) {
  26.     return num.textContent * 1;
  27.   });
  29.   //console.log(priceArr);
  30.   //计算金额
  31.   const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
  32.     return prev.map(function (item, key) {
  33.       return item * curr[key];
  34.     });
  35.   });
  36.   const amountAll = [amountArr, isChecked].reduce(function (prev, curr) {
  37.     return prev.map(function (item, key) {
  38.       return item * curr[key];
  39.     });
  40.   });
  41.   //console.log(amountArr);
  42.   let tatal = amountAll.reduce(function (prev, curr) {
  43.     return prev + curr;
  44.   });
  45.   let sum = sumArr.reduce(function (prev, curr) {
  46.     return prev + curr;
  47.   });
  48.   //渲染
  49.   document.querySelectorAll(".amount").forEach(function (item, index) {
  50.     item.textContent = amountArr[index];
  51.   });
  52.   document.querySelector("#total-amount").textContent = tatal;
  53.   document.querySelector("#sum").textContent = sum;
  54. }
  55. window.onload = autoCalculate;
  57. //判断全选和设置isChecked变化
  58. checkItems.forEach(item => {
  59.   item.onchange = () => {
  60.     checkAll.checked = [...checkItems].every(item => item.checked);
  61.     autoCheck();
  62.   };
  63. });
  64. function autoCheck() {
  65.   const chItem = document.getElementsByName("item");
  66.   const numCheck = [...chItem].map(function (num) {
  67.     return num.checked === true ? 1 : 0;
  68.   });
  69.   isChecked = numCheck;
  70.   autoCalculate();
  71. }
  72. console.log(isChecked);
  74. checkAll.onchange = ev => {
  75.   isChecked = [];
  76.   checkItems.forEach(item => (item.checked = ev.target.checked));
  77.   checkItems.forEach(item => isChecked.push(item.checked === true ? 1 : 0));
  78.   if (ev.target.checked) {
  79.     autoCalculate();
  80.   } else {
  81.     document.querySelector("#total-amount").textContent = 0;
  82.     document.querySelector("#sum").textContent = 0;
  83.   }
  84. };

总结：苦思冥想的做了一个半残的js代码，学艺不精，还需要进一步的改进代码，希望老师和同学多多指教。

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post