简体中文（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

博客列表 >JS实战练习：选项卡、在线相册、轮播图、购物车

JS实战练习：选项卡、在线相册、轮播图、购物车

初见
初见原创
2021年10月02日 21:26:07590浏览

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代码，学艺不精，还需要进一步的改进代码，希望老师和同学多多指教。

上一条：HTML常用元素样式、定位学习与应用下一条：python实现随机密码字典生成器示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多