Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图自动播放和购物车自动计算的完善
Blogger Information
Blog 20
fans 0
comment 1
visits 13097
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
轮播图自动播放和购物车自动计算的完善
zg的php学习
Original
512 people have browsed it

轮播图自动播放和购物车自动计算的完善

这是课后作业，完整代码太长了，所以只贴作业实现部分。

轮播图自动播放

HTML 代码：

  1. <body>
  2.   <div class="container">
  3.     <!-- 1. 图片组 -->
  4.     <div class="img-group"></div>
  6.     <!-- 2. 和图片数量对应的小按钮 -->
  7.     <div class="btn-group"></div>
  9.     <!-- 3. 向前和向后的翻页按钮 -->
  10.     <div class="skip">
  11.       <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
  12.       <a class="next" href="" onclick="nextImg(event)">&gt;</a>
  13.     </div>
  14.   </div>
  15. </body>

JS 代码：

  1. window.onload = () => {
  2.   // 1. 生成所有图片
  3.   createImgs(imgGroup, banners.length);
  4.   // 2. 生成与图片对应的小按钮
  5.   createBtns(btnGroup, banners.length);
  7.   //作业 ：每2秒自动切换，使用 setInterval + 事件派发器完成
  9.   //******作业开始******
  10.   let id = autoPlay();
  11.   //鼠标移入图片区时停止播放
  12.   document.querySelector(".container").onmouseover = () => {
  13.     clearInterval(id);
  14.   };
  15.   //鼠标移出图片区时重新自动播放
  16.   document.querySelector(".container").onmouseout = () => {
  17.     id = autoPlay();
  18.   };
  19. };
  20. //自动播放函数
  21. function autoPlay() {
  22.   return setInterval(() => {
  23.     const a = document.querySelector(".next");
  24.     a.addEventListener("autoEvent", nextImg);
  25.     a.dispatchEvent(new Event("autoEvent"));
  26.     a.removeEventListener("autoEvent", nextImg);
  27.   }, 2000);
  28. }
  29. //******作业结束******

购物车自动计算的完善部分

  1. // 作业 ：  当选择某个商品或去掉某个商品时， 能自动计算
  3. //******作业开始 1******
  4. //给所有checkbox添加监听事件，点击时能自动重新计算
  5. checkAll.addEventListener("change", autoCalculate);
  7. checkItems.forEach(function (item) {
  8.   item.addEventListener("change", autoCalculate);
  9. });
  10. //******作业结束 1******
  12. function autoCalculate() {
  13.   // 1. 获取每个商品的金额： 数量 * 单价
  14.   const numbers = document.querySelectorAll('input[type="number"]');
  15.   const numArr = [...numbers].map(function (num) {
  16.     return num.value * 1;
  17.   });
  19.   const prices = document.querySelectorAll("tbody .price");
  20.   const priceArr = [...prices].map(function (num) {
  21.     return num.textContent * 1;
  22.   });
  24.   // 2. 计算出每个商品的金额(数组)
  25.   const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
  26.     return prev.map(function (item, key) {
  27.       return item * curr[key];
  28.     });
  29.   });
  31.   //******作业开始 2******
  32.   // 改造autoCalculate自动计算函数中总金额和总数量的计算过程:
  33.   //因为reduce的index是从1开始，循环次数是n-1次，
  34.   //所以需要单独处理一下checkItems[0]是否选中的情况
  35.   // 3. 总金额
  36.   // let total = amountArr.reduce(function (prev, curr) {
  37.   //   return prev + curr;
  38.   // });
  39.   let total = amountArr.reduce(function (prev, curr, index) {
  40.     if (index == 1) {
  41.       if (!checkItems[0].checked) prev = 0;
  42.     }
  43.     if (checkItems[index].checked) {
  44.       return prev + curr;
  45.     } else {
  46.       return prev;
  47.     }
  48.   });
  50.   // 4. 总数量
  51.   // let sum = numArr.reduce(function (prev, curr) {
  52.   //   return prev + curr;
  53.   // });
  54.   let sum = numArr.reduce(function (prev, curr, index) {
  55.     if (index == 1) {
  56.       if (!checkItems[0].checked) prev = 0;
  57.     }
  58.     if (checkItems[index].checked) {
  59.       return prev + curr;
  60.     } else {
  61.       return prev;
  62.     }
  63.   });
  64.   //******作业结束 2******
  66.   // 5. 将所有数据渲染到页面中
  67.   document.querySelectorAll(".amount").forEach(function (item, index) {
  68.     item.textContent = amountArr[index];
  69.   });
  70.   document.querySelector("#total-amount").textContent = total;
  71.   document.querySelector("#sum").textContent = sum;
  72. }
Correcting teacher：天蓬老师天蓬老师

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