Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 标签切换、轮播图及购物车小案例相关知识总结
Blogger Information
Blog 49
fans 0
comment 0
visits 38181
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
标签切换、轮播图及购物车小案例相关知识总结
超超多喝水
Original
715 people have browsed it

标签切换、图片墙调整、轮播图及购物车小案例相关知识总结

标签切换

  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.     <link rel="stylesheet" href="style.css" />
  8.     <title>选项卡</title>
  9.   </head>
  10.   <body>
  11.     <div class="tabs">
  12.       <!-- 导航 -->
  13.       <!-- <ul class="tab" onclick="show(event)"> -->
  14.       <ul class="tab" onmouseover="show(event)">
  15.         <!-- data-index: 自定义属性,用dataset来读写 -->
  16.         <li class="active" data-index="1">娱乐</li>
  17.         <li data-index="2">科技</li>
  18.         <li data-index="3">军事</li>
  19.       </ul>
  21.       <!-- 与导航对应的相应用列表,有几个导航就应该有几个列表 -->
  22.       <ul data-index="1" class="item active">
  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.       </ul>
  30.       <ul data-index="2" class="item">
  31.         <li><a href="">腾讯全面支持银联云闪付,支付宝还会远吗</a></li>
  32.         <li><a href="">腾讯全面支持银联云闪付 支付宝还会远吗</a></li>
  33.         <li><a href="">腾讯全面支持银联云闪付 支付宝还会远吗</a></li>
  34.         <li><a href="">腾讯全面支持银联云闪付 支付宝还会远吗</a></li>
  35.         <li><a href="">腾讯全面支持银联云闪付 支付宝还会远吗</a></li>
  36.       </ul>
  38.       <ul data-index="3" class="item">
  39.         <li><a href="">华为汽车: 带着"极狐" 的销量走来了？</a></li>
  40.         <li><a href="">华为汽车: 带着"极狐" 的销量走来了？</a></li>
  41.         <li><a href="">华为汽车: 带着"极狐" 的销量走来了？</a></li>
  42.         <li><a href="">华为汽车: 带着"极狐" 的销量走来了？</a></li>
  43.         <li><a href="">华为汽车: 带着"极狐" 的销量走来了？</a></li>
  44.       </ul>
  45.     </div>
  46.     <script>
  47.       //数组.filter()数组过滤器
  48.       let arr = [3, 4, 5, 72, 35, 7, 8, 95, 5, 7, 8, 34, 10];
  49.       //filter前面加数组，括号内是箭头函数
  50.       let res = arr.filter((item) => item >= 5);
  51.       console.log(res);
  52.       //给上导航绑定点击事件
  53.       //函数的形参跟实参是事件
  54.       function show(ev) {
  55.         //获取事件绑定者
  56.         console.log(ev.currentTarget);
  57.         //获取事件触发者
  58.         console.log(ev.target);
  59.         //赋值给变量
  60.         const ul = ev.currentTarget;
  61.         const li = ev.target;
  62.         //循环遍历li，取消之前已经添加的active
  63.         // const lis = document.querySelectorAll(".tabs>.tab>li");
  64.         // for (let i = 0; i < lis.length; i++) {
  65.         //   if (lis[i].className === "active") {
  66.         //     lis[i].classList.remove("active");
  67.         //   }
  68.         // }
  69.         [...ul.children].forEach((item) => item.classList.remove("active"));
  70.         //给li动态添加class类
  71.         li.classList.add("active");
  72.         const uls = [...document.querySelectorAll(".tabs>.item")];
  73.         uls.forEach((item) => item.classList.remove("active"));
  74.         //这里获取的还是数组，后面加个索引0
  75.         uls.filter((item) => item.dataset.index === li.dataset.index)[0].classList.add("active");
  76.       }
  77.     </script>
  78.   </body>
  79. </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.     <link rel="stylesheet" href="style.css" />
  8.     <title>在线相册</title>
  9.   </head>
  10.   <body>
  11.     <ul class="container"></ul>
  12.     <script>
  13.       //array.reduce():数组的归并函数
  14.       //array.reduce(function(起始值（如果不自定义起始值，则默认是数组的第一个值），起始值的下一个值){},起始值（可以是任意值）)；
  15.       //   let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  16.       //   arr.reduce(function (prev, cur) {
  17.       //     console.log(prev, cur);
  18.       //     return prev + cur;
  19.       //   }, 11);
  20.       let imgS = [
  21.         "images/img_1.jpg",
  22.         "images/img_2.jpg",
  23.         "images/img_3.jpg",
  24.         "images/img_4.jpg",
  25.         "images/img_5.jpg",
  26.         "images/img_6.jpg",
  27.         "images/img_7.jpg",
  28.         "images/img_8.jpg",
  29.       ];
  30.       const ul = document.querySelector(".container");
  31.       window.onload = showImages();
  32.       function showImages() {
  33.         let res = imgS.reduce(function (prev, cur) {
  34.           let tpl = `
  35.                   <li>
  36.                       <img src="${cur}"/>
  37.                       <div>
  38.                           <button onclick=prev(this.parentNode.parentNode)>向前</button>
  39.                           <button onclick=next(this.parentNode.parentNode)>向后</button>
  40.                           <button onclick=del(this.parentNode.parentNode)>删除</button>
  41.                       </div>
  42.                   </li>
  43.                   `;
  44.           return prev + tpl;
  45.           //前面得加个空字符串，要不默认数组是第一个开始，这里添加的却是当前，会导致第一个没有li跟img标签的
  46.         }, "");
  47.         // console.log(res);
  48.         ul.insertAdjacentHTML("afterbegin", res);
  49.       }
  50.       //confirm()弹出对话框确认为真取消为假
  51.       function del(ele) {
  52.         return confirm("你要毁掉我的老婆？？") ? ele.remove() : false;
  53.       }
  54.       //parent.insertBefore(要插入的子元素，插入的子元素的位置)，insertBefore前面必须是父元素
  55.       //   previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
  56.       //   previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；
  58.       function prev(ele) {
  59.         let prevNode = ele.previousElementSibling;
  60.         if (prevNode === null) {
  61.           alert("已经是大老婆了");
  62.           return false;
  63.         } else {
  64.           ul.insertBefore(ele, prevNode);
  65.         }
  66.       }
  68.       function next(ele) {
  69.         let nextNode = ele.nextElementSibling;
  70.         if (nextNode === null) {
  71.           alert("已经打入冷宫了");
  72.           return false;
  73.         } else {
  74.           ul.insertBefore(nextNode, ele);
  75.         }
  76.       }
  77.     </script>
  78.   </body>
  79. </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="skip">
  17.         <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
  18.         <!-- 禁用a标签默认行为方法1 -->
  19.         <!-- <a class="prev" href="javascript:;" onclick="prevImg(event)">&lt;</a> -->
  20.         <a class="next" href="" onclick="nextImg(event)">&gt;</a>
  21.       </div>
  22.       <!-- 按钮组 -->
  23.       <div class="btn-group"></div>
  24.     </div>
  25.     <script>
  26.       //图片
  27.       const images = ["images/banner_1.jpg", "images/banner_2.jpg", "images/banner_3.jpg", "images/banner_4.jpg"];
  28.       const imgGroup = document.querySelector(".img-group");
  29.       //按钮
  30.       const btnGroup = document.querySelector(".btn-group");
  31.       window.onload = () => {
  32.         createImages(imgGroup, images.length);
  33.         createBtns(btnGroup, images.length);
  34.         //页面加载完成后自动调用一次自动循环
  35.         autoStart(event);
  36.       };
  37.       function createImages(parent, length) {
  38.         //创建虚拟节点对象，减少页面渲染抖动
  39.         const frag = document.createDocumentFragment();
  40.         for (let i = 0; i < length; i++) {
  41.           //这个img必须在for循环里面，这样才能每次都生成一个img，放到外面只能每次都更新里面的属性
  42.           const img = document.createElement("img");
  43.           img.src = images[i];
  44.           img.alt = `banner${i + 1}`;
  45.           img.dataset.index = `${i + 1}`;
  46.           if (i === 0) img.classList.add("active");
  47.           frag.append(img);
  48.         }
  49.         //将虚拟节点对象的子孙节点全部插入到parent中
  50.         parent.append(frag);
  51.       }
  53.       function createBtns(parent, length) {
  54.         //创建虚拟节点对象，减少页面渲染抖动
  55.         const frag = document.createDocumentFragment();
  56.         for (let i = 0; i < length; i++) {
  57.           const span = document.createElement("span");
  58.           span.dataset.index = `${i + 1}`;
  59.           // 给span按钮添加点击事件
  60.           if (i === 0) span.classList.add("active");
  61.           //这里跟html中不同 changeImg后面不需要加括号
  62.           //加上括号是执行的意思，添加事件的回调函数应该就是给相应的事件属性赋值，而很明显需要把一个函数赋值给这个事件属性，
  63.           //而不是函数的调用结果。所以在js中的绑定是直接赋值。而在标签内的事件属性的值是由引号包裹的，代表的是当点击该元素时，执行引号内的代码，直接把引号内的代码拿出来跑，如果你不加括号，那就不会调用那个函数。
  64.           span.onclick = changeImg;
  65.           frag.append(span);
  66.         }
  67.         //
  69.         //将虚拟节点对象的子孙节点全部插入到parent中
  70.         parent.append(frag);
  71.       }
  72.       //图片切页小按钮
  73.       function changeImg(ev) {
  74.         const span = btnGroup.querySelectorAll("span");
  75.         const img = imgGroup.querySelectorAll("img");
  76.         // console.log(img);
  77.         // console.log(ev.target);
  78.         // for (let i = 0; i < img.length; i++) {
  79.         //   span[i].classList.remove("active");
  80.         //   img[i].classList.remove("active");
  81.         // }
  82.         // forEach简写
  83.         [span, img].forEach((items) => {
  84.           //二次遍历
  85.           items.forEach((item) => {
  86.             //判断带active的取消，不带的不管
  87.             if (item.classList.contains("active")) item.classList.remove("active");
  88.           });
  89.         });
  90.         ev.target.classList.add("active");
  91.         img.forEach((item) => {
  92.           if (item.dataset.index === ev.target.dataset.index) item.classList.add("active");
  93.         });
  94.       }
  95.       //前翻页
  96.       function prevImg(ev) {
  97.         // 禁用a标签默认行为方法二
  98.         ev.preventDefault();
  99.         //拿到当前带active类的按钮跟图片
  100.         const span = btnGroup.querySelector("span.active");
  101.         const img = imgGroup.querySelector("img.active");
  102.         //拿到当前带active类的按钮跟图片的对应的前一个兄弟元素
  103.         const spanPrev = span.previousElementSibling;
  104.         const imgPrev = img.previousElementSibling;
  105.         span.classList.remove("active");
  106.         img.classList.remove("active");
  107.         if (spanPrev !== null && imgPrev !== null) {
  108.           spanPrev.classList.add("active");
  109.           imgPrev.classList.add("active");
  110.         } else {
  111.           btnGroup.lastElementChild.classList.add("active");
  112.           imgGroup.lastElementChild.classList.add("active");
  113.         }
  114.       }
  115.       //后翻页
  116.       function nextImg(ev) {
  117.         // 禁用a标签默认行为方法二
  118.         ev.preventDefault();
  119.         //拿到当前带active类的按钮跟图片
  120.         const span = btnGroup.querySelector("span.active");
  121.         const img = imgGroup.querySelector("img.active");
  122.         //拿到当前带active类的按钮跟图片的对应的前一个兄弟元素
  123.         const spanNext = span.nextElementSibling;
  124.         const imgNext = img.nextElementSibling;
  125.         span.classList.remove("active");
  126.         img.classList.remove("active");
  127.         if (spanNext !== null && imgNext !== null) {
  128.           spanNext.classList.add("active");
  129.           imgNext.classList.add("active");
  130.         } else {
  131.           btnGroup.firstElementChild.classList.add("active");
  132.           imgGroup.firstElementChild.classList.add("active");
  133.         }
  134.       }
  135.       // 初步自动播放
  136.       // const next = document.querySelector(".container>.skip>.next");
  137.       // const autoClick = new Event("click");
  138.       // setInterval(() => next.dispatchEvent(autoClick), 2000);
  139.       //加入限制，这里需要注意setInterval()如果需要停止，那么得把它赋值给一个变量，到时候停止这个同名变量
  140.       let time = null;
  141.       const next = document.querySelector(".container>.skip>.next");
  142.       const container = document.querySelector(".container");
  143.       const autoClick = new Event("click");
  144.       container.addEventListener("mouseover", autoStop);
  145.       container.addEventListener("mouseout", autoStart);
  146.       // container.onmouseover = autoStop;
  147.       // container.onmouseout = autoStart;
  148.       function autoStart() {
  149.         time = setInterval(() => next.dispatchEvent(autoClick), 2000);
  150.       }
  151.       function autoStop() {
  152.         clearInterval(time);
  153.       }
  154.     </script>
  155.   </body>
  156. </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.     <link rel="stylesheet" href="style.css" />
  8.     <title>购物车</title>
  9.   </head>
  11.   <body>
  12.     <table>
  13.       <caption>
  14.         我的购物车
  15.       </caption>
  16.       <thead>
  17.         <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th>
  18.         <th>图片</th>
  19.         <th>品名</th>
  20.         <th>单位</th>
  21.         <th>单价/元</th>
  22.         <th>数量</th>
  23.         <th>金额/元</th>
  24.       </thead>
  26.       <tbody>
  27.         <tr>
  28.           <td>
  29.             <input type="checkbox" name="item" class="item" value="SN-1020" checked />
  30.           </td>
  31.           <td>
  32.             <a href=""><img src="images/p1.png" alt="" /></a>
  33.           </td>
  34.           <td>JavaScript权威指南(第七版)</td>
  35.           <td>本</td>
  36.           <td class="price">100</td>
  37.           <td>
  38.             <input type="number" min="1" value="1" />
  39.           </td>
  40.           <td class="amount">0</td>
  41.         </tr>
  42.         <tr>
  43.           <td>
  44.             <input type="checkbox" name="item" class="item" value="SN-1020" checked />
  45.           </td>
  46.           <td>
  47.             <a href=""><img src="images/p2.png" alt="" /></a>
  48.           </td>
  49.           <td>JavaScript高级程序设计(第四版)</td>
  50.           <td>本</td>
  51.           <td class="price">129</td>
  52.           <td>
  53.             <input type="number" min="1" value="1" />
  54.           </td>
  55.           <td class="amount">0</td>
  56.         </tr>
  57.         <tr>
  58.           <td>
  59.             <input type="checkbox" name="item" class="item" value="SN-1030" checked />
  60.           </td>
  61.           <td>
  62.             <a href=""><img src="images/p3.png" alt="" /></a>
  63.           </td>
  64.           <td>JavaScript忍者秘籍(第二版)</td>
  65.           <td>台</td>
  66.           <td class="price">99</td>
  67.           <td>
  68.             <input type="number" min="1" value="1" />
  69.           </td>
  70.           <td class="amount">0</td>
  71.         </tr>
  72.         <tr>
  73.           <td>
  74.             <input type="checkbox" name="item" class="item" value="SN-1040" checked />
  75.           </td>
  76.           <td>
  77.             <a href=""><img src="images/p4.png" alt="" /></a>
  78.           </td>
  79.           <td>ThinkPad X1 Carbon 2021</td>
  80.           <td>台</td>
  81.           <td class="price">12999</td>
  82.           <td>
  83.             <input type="number" min="1" value="1" />
  84.           </td>
  85.           <td class="amount">0</td>
  86.         </tr>
  87.         <tr>
  88.           <td>
  89.             <input type="checkbox" name="item" class="item" value="SN-1050" checked />
  90.           </td>
  91.           <td>
  92.             <a href=""><img src="images/p5.png" alt="" /></a>
  93.           </td>
  94.           <td>MacBook Pro 16 10代i7 16G 512G</td>
  95.           <td>台</td>
  96.           <td class="price">23800</td>
  97.           <td>
  98.             <input type="number" min="1" value="1" />
  99.           </td>
  100.           <td class="amount">0</td>
  101.         </tr>
  102.       </tbody>
  103.       <tfoot>
  104.         <tr>
  105.           <td colspan="5">总计:</td>
  106.           <td id="sum">0</td>
  107.           <td id="total-amount">0</td>
  108.         </tr>
  109.       </tfoot>
  110.     </table>
  111.     <div style="width: 90%; margin: 10px auto">
  112.       <button style="float: right; width: 100px">结算</button>
  113.     </div>
  114.     <script>
  115.       //   let arr = [3, 4, 5, 6, 7, 8];
  116.       //   console.log(arr.some((item) => item > 4));
  117.       //   console.log(arr.every((item) => item > 4));
  118.       //   onchange
  119.       const checkAll = document.getElementById("check-all");
  120.       const items = document.getElementsByName("item");
  121.       checkAll.onchange = function (ev) {
  122.         //首先配置下面商品的选择跟随上面全选按钮进行全选或全不选，下面跟随上面的状态，这里不能设置true，设置true就不管咋点都是全选
  123.         items.forEach((item) => (item.checked = ev.target.checked));
  124.       };
  125.       //配置有一个按钮没选中全选失效,全部选中全选生效
  126.       //   items.forEach(function (item) {
  127.       //     item.onchange = function (ev) {
  128.       //       if ([...items].some((item) => item.checked == false)) {
  129.       //         checkAll.checked = false;
  130.       //       } else if ([...items].every((item) => item.checked == true)) {
  131.       //         checkAll.checked = true;
  132.       //       }
  133.       //     };
  134.       //   });
  135.       //不用这么复杂，只需要先遍历一遍下面的小按钮，当小按钮点击的时候触发一个onchange，函数对象中直接用array.every作判断给checkAll的checked属性赋值true or false就可以啊
  136.       items.forEach(function (item) {
  137.         item.onchange = function () {
  138.           checkAll.checked = [...items].every((item) => item.checked);
  139.         };
  140.       });
  141.       //方法一：
  142.       //   const price = document.querySelectorAll(".price");
  143.       //   const number = document.querySelectorAll("input[type='number']");
  144.       //   const amount = document.querySelectorAll(".amount");
  145.       //   const sum = document.getElementById("sum");
  146.       //   const totalAmount = document.getElementById("total-amount");
  147.       //   let myChange = new Event("change");
  148.       //   for (let i = 0; i < [...price].length; i++) {
  149.       //     number[i].onchange = getPrice;
  150.       //     number[i].onkeyup = getPrice;
  151.       //     number[i].afterpaste = getPrice;
  152.       //     items[i].onchange = getPrice;
  153.       //     number[i].dispatchEvent(myChange);
  154.       //   }
  155.       //   function getPrice() {
  156.       //     let s = 0;
  157.       //     let t = 0;
  158.       //     for (let i = 0; i < [...price].length; i++) {
  159.       //       if (number[i].value == "") {
  160.       //         number[i].value = 0;
  161.       //       } else {
  162.       //         if (typeof number[i].value !== "number" || number[i].value % 1 !== 0) number[i].value = parseInt(number[i].value);
  163.       //       }
  164.       //       amount[i].innerText = price[i].innerText * number[i].value;
  165.       //       if (items[i].checked === false) {
  166.       //         s += 0;
  167.       //         t += 0;
  168.       //       } else {
  169.       //         s += parseInt(number[i].value);
  170.       //         t += parseInt(amount[i].innerText);
  171.       //       }
  172.       //     }
  173.       //     sum.innerText = s;
  174.       //     totalAmount.innerText = t;
  175.       //   }
  176.       //方法二：
  177.       //获取数量
  178.       const number = document.querySelectorAll("input[type='number']");
  179.       //给每个数量加监听事件
  180.       [items, number].forEach((items) =>
  181.         items.forEach((item) => {
  182.           item.onchange = getPrice;
  183.           item.onkeyup = getPrice;
  184.           item.afterpaste = getPrice;
  185.         })
  186.       );
  187.       function getPrice() {
  188.         //获取数量
  189.         const number = document.querySelectorAll("input[type='number']");
  190.         //这里的num是number类型的input元素啊，别忘了加value,用map函数遍历成新的数组，×1使数据类型变为数值
  191.         // [...number].forEach((num) => (num.value = parseInt(num.value)));
  192.         //数量这里用parseInt()强制转换成了整型
  193.         const numArr = [...number].map((num) => (num.value = parseInt(num.value)));
  194.         //获取单价
  195.         const price = document.querySelectorAll(".price");
  196.         const priceArr = [...price].map((price) => (price.textContent = price.textContent * 1));
  197.         //遍历出每一个的单条总价(显示用)
  198.         const amountArrA = [numArr, priceArr].reduce((prev, cur) => prev.map((val, key) => val * cur[key]));
  199.         //遍历item的checked属性做个判断，判断为真时保留数值，为假时数量赋值0
  200.         items.forEach((item, key) => {
  201.           if (!item.checked) numArr[key] = 0;
  202.         });
  203.         //遍历出每一个的单条总价(计算用)
  204.         const amountArrC = [numArr, priceArr].reduce((prev, cur) => prev.map((val, key) => val * cur[key]));
  205.         // console.log(amountArr);
  206.         //总数
  207.         const nubSum = numArr.reduce((prev, cur) => prev + cur);
  208.         //总价
  209.         const priceSum = amountArrC.reduce((prev, cur) => prev + cur);
  210.         const amount = document.querySelectorAll(".amount");
  211.         const sum = document.getElementById("sum");
  212.         const totalAmount = document.getElementById("total-amount");
  213.         //加入页面
  214.         amount.forEach((item, index) => (item.textContent = amountArrA[index]));
  215.         sum.textContent = nubSum;
  216.         totalAmount.textContent = priceSum;
  217.       }
  218.       window.onload = function () {
  219.         getPrice();
  220.       };
  221.     </script>
  222.   </body>
  223. </html>
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