search

博客列表 >标签切换、轮播图及购物车小案例相关知识总结

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

超超多喝水
超超多喝水原创
2021年11月11日 01:17:51739浏览

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

标签切换

  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>
上一条：个人简历&用户注册下一条：用户注册作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多