search

博客列表 >轮播图自动播放、购物车选择时自动计算功能

轮播图自动播放、购物车选择时自动计算功能

Leo的博客
Leo的博客原创
2021年10月18日 13:15:17494浏览

轮播图自动播放

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

加入入css效果

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  11. /* 轮播图的容器 */
  12. .container {
  13.   width: 62.5em;
  14.   height: 22em;
  16.   margin: 1em auto;
  17.   /* 转为定位元素/定位父级 */
  18.   position: relative;
  19. }
  20. .container:hover {
  21.   cursor: pointer;
  22. }
  23. /* 图片组 */
  24. .container > .img-group img {
  25.   width: 100%;
  26.   height: 100%;
  27.   border-radius: 0.6em;
  29.   /* 默认全部隐藏 */
  30.   display: none;
  32.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  33.   position: absolute;
  34.   left: 0;
  35.   top: 0;
  36. }
  38. /* 设置默认显示的图片(第一张) */
  39. .container > .img-group img.active {
  40.   display: block;
  41. }
  43. /* 按钮组(独立按钮) */
  44. .container > .btn-group {
  45.   position: absolute;
  46.   left: 0;
  47.   right: 0;
  48.   bottom: 0;
  49.   /* 水平居中 */
  50.   text-align: center;
  51. }
  52. .container > .btn-group span {
  53.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  54.   display: inline-block;
  55.   padding: 0.5em;
  56.   margin: 0 0.2em;
  57.   background-color: #fff;
  58.   border-radius: 50%;
  59. }
  60. .container > .btn-group span:hover {
  61.   cursor: pointer;
  62. }
  63. .container > .btn-group .active {
  64.   background-color: #000;
  65. }
  66. /* 翻页按钮 */
  67. .container .skip a {
  68.   position: absolute;
  69.   width: 2.5rem;
  70.   height: 5rem;
  71.   line-height: 5rem;
  72.   text-align: center;
  73.   opacity: 0.3;
  74.   top: 9rem;
  75.   font-weight: lighter;
  77.   font-size: 2rem;
  78.   background-color: #ccc;
  79. }
  80. .container .skip .prev {
  81.   left: 0;
  82. }
  83. .container .skip .next {
  84.   right: 0;
  85. }
  86. .container .skip *:hover {
  87.   opacity: 0.6;
  88.   color: #666;
  89. }
  1.     <script>
  2.       // 文档片断
  3.       //   const ul = document.querySelector(".list");
  5.       //   // 文档片断 ，就是临时的父节点
  6.       //   const frag = document.createDocumentFragment();
  8.       //   for (let i = 0; i < 100; i++) {
  9.       //     const li = document.createElement("li");
  10.       //     li.textContent = "item" + (i + 1);
  11.       //     // 这个添加操作，是在内存中进行，与页面无关
  12.       //     frag.append(li);
  13.       //   }
  14.       //   ul.append(frag);
  16.       const banners = [
  17.         "imges2/1banner.jpg",
  18.         "imges2/2banner.jpg",
  19.         "imges2/3banner.jpg",
  20.         "imges2/4banner.jpg",
  21.       ];
  22.       //    图片组元素
  23.       const imgGroup = document.querySelector(".container > .img-group");
  24.       // 按钮组
  25.       const btnGroup = document.querySelector(".container > .btn-group");
  26.       // 当页面加载成功，将所有图片和与图片对应的小按钮全部渲染出来
  27.       window.onload = () => {
  28.         // 1. 生成所有图片
  29.         createImgs(imgGroup, banners.length);
  30.         // 2. 生成与图片对应的小按钮
  31.         createBtns(btnGroup, banners.length);
  32.       };

生成图片

  1.       // 生成图片
  2.       function createImgs(parent, length) {
  3.         const frag = document.createDocumentFragment();
  4.         for (let i = 0; i < length; i++) {
  5.           const img = document.createElement("img");
  6.           img.src = banners[i];
  7.           // 为每一张图片添加一个索引: data-index，它与对应的小按钮一一对应
  8.           img.dataset.index = `${i + 1}`;
  9.           if (i === 0) img.classList.add("active");
  10.           // 使用文档片断，在内存中添加
  11.           frag.append(img);
  12.         }
  13.         parent.append(frag);
  14.       }
  16.       // 生成按钮
  17.       function createBtns(parent, length) {
  18.         const frag = document.createDocumentFragment();
  19.         for (let i = 0; i < length; i++) {
  20.           const span = document.createElement("span");
  21.           // 为每一张图片添加一个索引: data-index，它与对应的小按钮一一对应
  22.           span.dataset.index = `${i + 1}`;
  23.           if (i === 0) span.classList.add("active");
  24.           // 为新生成按钮添加点击事件
  25.           span.onclick = showImgs;
  26.           // 使用文档片断，在内存中添加
  27.           frag.append(span);
  28.         }
  29.         parent.append(frag);
  30.       }
  32.       // parent.append(frag);
  34.       //   为这个按钮的showImgs创建函数
  35.       function showImgs(ev) {
  36.         // 1. 获取所有图片和按钮
  37.         const imgArr = imgGroup.querySelectorAll("img");
  38.         const btnArr = btnGroup.querySelectorAll("span");
  39.         console.log(imgArr, btnArr);
  40.         // 2. 根据按钮激活状态设置对应的图片显示
  41.         btnArr.forEach((btn) => btn.classList.remove("active"));
  42.         ev.target.classList.add("active");
  43.         imgArr.forEach((img) => img.classList.remove("active"));
  45.         // 3. 根据按钮与图片的data-index属性的值，匹配上再激活
  46.         imgArr.forEach((img) => {
  47.           if (ev.target.dataset.index === img.dataset.index)
  48.             img.classList.add("active");
  49.         });
  50.       }
  52.       // 翻页
  53.       // 向前
  54.       function prevImg(ev) {
  55.         //   禁用<a>标签默认跳转行为，当按钮用
  56.         ev.preventDefault();
  57.         // 1. 当前图片和当前的按钮
  58.         const currentImg = imgGroup.querySelector("img.active");
  59.         const currentBtn = btnGroup.querySelector("span.active");
  60.         console.log(currentImg, currentBtn);
  62.         // 2. 取消当前图片和当前的按钮激活状态
  63.         currentImg.classList.remove("active");
  64.         currentBtn.classList.remove("active");
  66.         // 3. 取到当前图片和按钮的前一个兄弟节点
  67.         const prevImg = currentImg.previousElementSibling;
  68.         const prevBtn = currentBtn.previousElementSibling;
  70.         // 4. 如果存在前一个兄弟，就设置它为激活并显示出来
  71.         if (prevImg !== null && prevBtn !== null) {
  72.           prevBtn.classList.add("active");
  73.           prevImg.classList.add("active");
  74.         } else {
  75.           imgGroup.lastElementChild.classList.add("active");
  76.           btnGroup.lastElementChild.classList.add("active");
  77.         }
  78.       }
  80.       // 向后
  81.       function nextImg(ev) {
  82.         //   禁用<a>标签默认跳转行为，当按钮用
  83.         ev.preventDefault();
  84.         // 1. 当前图片和当前的按钮
  85.         const currentImg = imgGroup.querySelector("img.active");
  86.         const currentBtn = btnGroup.querySelector("span.active");
  87.         console.log(currentImg, currentBtn);
  89.         // 2. 取消当前图片和当前的按钮激活状态
  90.         currentImg.classList.remove("active");
  91.         currentBtn.classList.remove("active");
  93.         // 3. 取到当前图片和按钮的前一个兄弟节点
  94.         const nextImg = currentImg.nextElementSibling;
  95.         const nextBtn = currentBtn.nextElementSibling;
  97.         // 4. 如果存在前一个兄弟，就设置它为激活并显示出来
  98.         if (nextImg !== null && nextBtn !== null) {
  99.           nextBtn.classList.add("active");
  100.           nextImg.classList.add("active");
  101.         } else {
  102.           imgGroup.firstElementChild.classList.add("active");
  103.           btnGroup.firstElementChild.classList.add("active");
  104.         }
  105.       }

作业：每2s自送切换到下一个，使用setInterval 执行间歇事件

  1.       setInterval(() => {
  2.         //1、当前图片和当前按钮
  3.         const currentImg = imgGroup.querySelector("img.active");
  4.         const currentBtn = btnGroup.querySelector("span.active");
  5.         //2、取消当前图片和当前按钮的激活状态
  6.         currentImg.classList.remove("active");
  7.         currentBtn.classList.remove("active");
  8.         //3、取得当前图片和按钮的前一个兄弟节点
  9.         const nextImg = currentImg.nextElementSibling;
  10.         const nextBtn = currentBtn.nextElementSibling;
  11.         //
  12.         //4、如果存在前一个兄弟，就设置它为激活状态
  13.         if (nextImg !== null && nextBtn !== null) {
  14.           nextBtn.classList.add("active");
  15.           nextImg.classList.add("active");
  16.         } else {
  17.           imgGroup.firstElementChild.classList.add("active");
  18.           btnGroup.firstElementChild.classList.add("active");
  19.         }
  20.       }, 2000);

购物车选择自动计算功能

全选复选框

  1. const checkAll = document.querySelector("#check-all");
  2. const checkItems = document.getElementsByName("item");
  4. // change: 当控件中的值发生变化时触发
  5. // 将全选按钮的状态，赋值给下面所有的商品的checkbox
  6. checkAll.onchange = function (ev) {
  7.   checkItems.forEach(function (item) {
  8.     item.checked = ev.target.checked;
  9.   });
  10. };
  12. checkItems.forEach(function (item) {
  13.   // onchange监测它的状态
  14.   item.onchange = function () {
  15.     //只有全部选中才更新全选按钮的状态
  16.     checkAll.checked = [...checkItems].every(function (item) {
  17.       return item.checked;
  18.     });
  19.   };
  20. });
  21. // 一个点掉就会取消全选,全部点上全选就会自动选上

自动计算
所有的计算，都是基于数量的变化

  1. const numInput = document.querySelectorAll('input[type="number"]');
  3. numInput.forEach(function (input) {
  4.   input.onchange = autoCalculate;
  5. });
  7. function autoCalculate() {
  8.   // 1. 获取每个商品的金额： 数量 * 单价
  9.   const numbers = document.querySelectorAll('input[type="number"]');
  10.   const numArr = [...numbers].map(function (num) {
  11.     return num.value * 1;
  12.   });
  14.   const prices = document.querySelectorAll("tbody .price");
  15.   const priceArr = [...prices].map(function (num) {
  16.     return num.textContent * 1;
  17.   });
  19.   // 2. 计算出每个商品的金额(数组)
  20.   const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
  21.     return prev.map(function (item, key) {
  22.       return item * curr[key];
  23.     });
  24.   });
  25.   console.log(amountArr);

总金额

  1.   let total = amountArr.reduce(function (prev, curr) {
  2.     return prev + curr;
  3.   });

总数量

  1.   let sum = numArr.reduce(function (prev, curr) {
  2.     return prev + curr;
  3.   });
  5.   let total = amountArr.reduce(function (prev, curr, index) {
  6.     if (index == 1) {
  7.       if (!checkItems[0].checked) prev = 0;
  8.     }
  9.     if (checkItems[index].checked) {
  10.       return prev + curr;
  11.     } else {
  12.       return prev;
  13.     }
  14.   });

选择去掉商品自动计算
第一和第二句checkAll.onchange里加上一个autoCalculate()即7和13行。

最后一句在计算的函数里，添加一条判断语句，判断前面的check如果没勾上，就不纳入计算（下列代码的24行）

  1. // change: 当控件中的值发生变化时触发
  2. // 将全选按钮的状态，赋值给下面所有的商品的checkbox
  3. checkAll.onchange = function (ev) {
  4.   checkItems.forEach(function (item) {
  5.     item.checked = ev.target.checked;
  6.   });
  7.  // autoCalculate();
  8. };
  10. checkItems.forEach(function (item) {
  11.   // onchange监测它的状态
  12.   item.onchange = function (ev) {
  13.     //autoCalculate();
  14.     //只有全部选中才更新全选按钮的状态
  15.     checkAll.checked = [...checkItems].every(function (item) {
  16.       return item.checked;
  17.     });
  18.   };
  19. });
  21.  // 1. 获取每个商品的金额： 数量 * 单价
  22.   const numbers = document.querySelectorAll('input[type="number"]');
  23.   const numArr = [...numbers].map(function (num) {
  24.     //if (!num.parentNode.parentNode.getElementsByClassName("item")[0].checked)
  25.       return 0;
  26.     return num.value * 1;
  27.   });

将所有数据渲染到页面中

  1.   document.querySelectorAll(".amount").forEach(function (item, index) {
  2.     item.textContent = amountArr[index];
  3.   });
  4.   document.querySelector("#total-amount").textContent = total;
  5.   document.querySelector("#sum").textContent = sum;
  6. }
  8. window.onload = autoCalculate;
上一条：第五课 定位与flex，grid。下一条：PHP CURL/JSON应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议