search

博客列表 >JS-实战小案例

JS-实战小案例

晴天
晴天原创
2020年05月27日 16:21:112046浏览

JS-实战小案例

  • 留言板
  • 选项卡
  • 图片懒加载
  • 轮播图

1.留言板

演示http://php.rc238.cn/0526/demo1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     评论：<input type="text" />
  10.     <!-- 创建有序列表 -->
  11.     <ol></ol>
  12.     <script>
  13.       // 实现功能：input框中的值 按回车显示到有序列表中 且永远现在在第一位
  14.       var cl = console.log;
  15.       // 获取输入框与有序列表
  16.       var input = document.querySelector("input");
  17.       var ol = document.querySelector("ol");
  19.       // keyDown 按下
  20.       // keyup 抬起
  21.       // keypress 获取单个字母，功能键无效
  22.       // 创建事件监听
  23.       input.addEventListener(
  24.         "keyup",
  25.         function (ev) {
  26.           //   先拿到按键
  27.           //   cl(ev.key);  回车  Enter
  28.           // 是enter 才执行
  29.           if (ev.key === "Enter") {
  30.             // 判断input是否有值
  31.             if (input.value.length === 0) {
  32.               alert("输入框为空,提交失败");
  33.             }
  34.             // 创建标签
  35.             var li = document.createElement("li");
  36.             // 加个删除按钮
  37.             li.innerHTML =
  38.               input.value + "<button onclick='del(this)'>删除</button>";
  39.             // 判断是否有值
  40.             if (ol.childElementCount === 0) {
  41.               // 插入ol中
  42.               ol.appendChild(li);
  43.             } else {
  44.               // 放到最前面
  45.               ol.insertBefore(li, ol.firstElementChild);
  46.             }
  47.             // 清空input框
  48.             input.value = null;
  49.           }
  50.         },
  51.         false
  52.       );
  53.       //   删除函数
  54.       function del(ele) {
  55.         //   问一下要不要删除
  56.         return confirm("是否删除？")
  57.           ? ele.parentNode.parentNode.removeChild(ele.parentNode)
  58.           : false;
  59.       }
  60.     </script>
  61.   </body>
  62. </html>

2.选项卡

演示http://php.rc238.cn/0526/demo2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>选项卡</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       a {
  13.         text-decoration: none;
  14.         color: #555;
  15.       }
  16.       a:hover {
  17.         text-decoration: underline;
  18.         color: red;
  19.       }
  20.       li {
  21.         list-style: none;
  22.       }
  23.       li:hover {
  24.         cursor: default;
  25.       }
  26.       .tabs {
  27.         width: 300px;
  28.         height: 300px;
  29.         margin: 30px;
  30.         background-color: #ddd;
  32.         display: flex;
  33.         flex-direction: column;
  34.       }
  36.       .tab {
  37.         height: 36px;
  38.         display: flex;
  39.       }
  40.       .tab li {
  41.         flex: auto;
  42.         text-align: center;
  43.         line-height: 36px;
  44.         background-color: #fff;
  45.       }
  46.       .tab li.active {
  47.         background-color: #ddd;
  48.       }
  50.       /* 默认所有选项卡只有一个显示,其它隐藏 */
  51.       .item {
  52.         padding: 20px;
  53.         display: none;
  54.       }
  55.       .item.active {
  56.         display: block;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="tabs">
  62.       <!-- 导航 -->
  63.       <ul class="tab">
  64.         <li class="active" data-index="1">水果</li>
  65.         <li data-index="2">手机</li>
  66.         <li data-index="3">汽车</li>
  67.       </ul>
  69.       <!-- 详情1 -->
  70.       <ul class="item active" data-index="1">
  71.         <li><a href="">西瓜</a></li>
  72.         <li><a href="">苹果</a></li>
  73.         <li><a href="">香蕉</a></li>
  74.       </ul>
  76.       <!-- 详情2 -->
  77.       <ul class="item" data-index="2">
  78.         <li><a href="">华为</a></li>
  79.         <li><a href="">小米</a></li>
  80.         <li><a href="">OPPO</a></li>
  81.       </ul>
  83.       <!-- 详情2 -->
  84.       <ul class="item" data-index="3">
  85.         <li><a href="">吉利</a></li>
  86.         <li><a href="">奇瑞</a></li>
  87.         <li><a href="">长城</a></li>
  88.       </ul>
  89.     </div>
  91.     <script>
  92.       var cl = console.log;
  94.       // 给导航添加一个点击事件
  95.       var tab = document.querySelector(".tab");
  96.       var items = document.querySelectorAll(".item");
  97.       tab.addEventListener("click", show, false);
  98.       tab.addEventListener("mouseover", show, false);
  99.       function show(ev) {
  100.         // 先删除所有的active
  101.         ev.target.parentNode.childNodes.forEach(function (item) {
  102.           if (item.nodeType === 1) {
  103.             item.classList.remove("active");
  104.           }
  105.         });
  107.         // 给当前的点击激活
  108.         ev.target.classList.toggle("active");
  110.         // 清空原有列表的激活
  112.         items.forEach(function (item) {
  113.           item.classList.remove("active");
  114.           // 找到遇到导航相对应的 激活
  115.           //   if (item.dataset.index === ev.target.dataset.index) {
  116.           //     item.classList.add("active");
  117.           //   }
  118.         });
  119.         items.forEach(function (item) {
  120.           if (item.dataset.index === ev.target.dataset.index)
  121.             item.classList.add("active");
  122.         });
  123.       }
  124.     </script>
  125.   </body>
  126. </html>

3.懒加载

演示http://php.rc238.cn/0526/demo3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>懒加载</title>
  7.     <style>
  8.       .container {
  9.         width: 500px;
  10.         display: grid;
  11.         gap: 10px;
  12.         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  13.       }
  14.       .container img {
  15.         width: 100%;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container">
  21.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  22.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  23.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  24.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  25.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  26.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  27.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  28.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  29.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  30.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  31.       <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
  32.       <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
  33.       <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg" />
  34.       <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg" />
  35.       <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg" />
  36.       <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg" />
  37.       <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg" />
  38.       <img src="images/temp.jpg" alt="" data-src="images/img-18.jpg" />
  39.       <img src="images/temp.jpg" alt="" data-src="images/img-19.jpg" />
  40.       <img src="images/temp.jpg" alt="" data-src="images/img-20.jpg" />
  41.       <img src="images/temp.jpg" alt="" data-src="images/img-21.jpg" />
  42.       <img src="images/temp.jpg" alt="" data-src="images/img-22.jpg" />
  43.       <img src="images/temp.jpg" alt="" data-src="images/img-23.jpg" />
  44.       <img src="images/temp.jpg" alt="" data-src="images/img-24.jpg" />
  45.       <img src="images/temp.jpg" alt="" data-src="images/img-25.jpg" />
  46.       <img src="images/temp.jpg" alt="" data-src="images/img-26.jpg" />
  47.       <img src="images/temp.jpg" alt="" data-src="images/img-27.jpg" />
  48.       <img src="images/temp.jpg" alt="" data-src="images/img-28.jpg" />
  49.       <img src="images/temp.jpg" alt="" data-src="images/img-29.jpg" />
  50.       <img src="images/temp.jpg" alt="" data-src="images/img-30.jpg" />
  51.       <img src="images/temp.jpg" alt="" data-src="images/img-31.jpg" />
  52.       <img src="images/temp.jpg" alt="" data-src="images/img-32.jpg" />
  53.       <img src="images/temp.jpg" alt="" data-src="images/img-33.jpg" />
  54.       <img src="images/temp.jpg" alt="" data-src="images/img-34.jpg" />
  55.       <img src="images/temp.jpg" alt="" data-src="images/img-35.jpg" />
  56.       <img src="images/temp.jpg" alt="" data-src="images/img-36.jpg" />
  57.       <img src="images/temp.jpg" alt="" data-src="images/img-37.jpg" />
  58.       <img src="images/temp.jpg" alt="" data-src="images/img-38.jpg" />
  59.       <img src="images/temp.jpg" alt="" data-src="images/img-39.jpg" />
  60.       <img src="images/temp.jpg" alt="" data-src="images/img-40.jpg" />
  61.       <img src="images/temp.jpg" alt="" data-src="images/img-41.jpg" />
  62.       <img src="images/temp.jpg" alt="" data-src="images/img-42.jpg" />
  63.       <img src="images/temp.jpg" alt="" data-src="images/img-43.jpg" />
  64.       <img src="images/temp.jpg" alt="" data-src="images/img-44.jpg" />
  65.       <img src="images/temp.jpg" alt="" data-src="images/img-45.jpg" />
  66.       <img src="images/temp.jpg" alt="" data-src="images/img-46.jpg" />
  67.       <img src="images/temp.jpg" alt="" data-src="images/img-47.jpg" />
  68.       <img src="images/temp.jpg" alt="" data-src="images/img-48.jpg" />
  69.       <img src="images/temp.jpg" alt="" data-src="images/img-49.jpg" />
  70.       <img src="images/temp.jpg" alt="" data-src="images/img-50.jpg" />
  71.       <img src="images/temp.jpg" alt="" data-src="images/img-51.jpg" />
  72.       <img src="images/temp.jpg" alt="" data-src="images/img-52.jpg" />
  73.       <img src="images/temp.jpg" alt="" data-src="images/img-53.jpg" />
  74.       <img src="images/temp.jpg" alt="" data-src="images/img-54.jpg" />
  75.       <img src="images/temp.jpg" alt="" data-src="images/img-55.jpg" />
  76.       <img src="images/temp.jpg" alt="" data-src="images/img-56.jpg" />
  77.       <img src="images/temp.jpg" alt="" data-src="images/img-57.jpg" />
  78.       <img src="images/temp.jpg" alt="" data-src="images/img-58.jpg" />
  79.       <img src="images/temp.jpg" alt="" data-src="images/img-59.jpg" />
  80.       <img src="images/temp.jpg" alt="" data-src="images/img-60.jpg" />
  81.       <img src="images/temp.jpg" alt="" data-src="images/img-61.jpg" />
  82.       <img src="images/temp.jpg" alt="" data-src="images/img-62.jpg" />
  83.       <img src="images/temp.jpg" alt="" data-src="images/img-63.jpg" />
  84.       <img src="images/temp.jpg" alt="" data-src="images/img-64.jpg" />
  85.       <img src="images/temp.jpg" alt="" data-src="images/img-65.jpg" />
  86.       <img src="images/temp.jpg" alt="" data-src="images/img-66.jpg" />
  87.       <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg" />
  88.       <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg" />
  89.       <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg" />
  90.       <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg" />
  91.     </div>
  92.   </body>
  93.   <script>
  94.     var cl = console.log;
  95.     //   先拿到图片
  96.     var imgs = document.querySelectorAll("img");
  97.     // 拿到文档可视区高度
  98.     var clientHeight = document.documentElement.clientHeight;
  99.     // 监听窗口滚动
  100.     window.addEventListener(
  101.       "scroll",
  102.       function () {
  103.         lazyload(imgs, clientHeight);
  104.       },
  105.       false
  106.     );
  107.     // 懒加载函数
  108.     function lazyload(imgs, clientHeight) {
  109.       // 动态获取当前内容区距离顶部的滚动大小
  110.       var scrollTop = document.documentElement.scrollTop;
  112.       // 遍历图片
  113.       imgs.forEach(function (img) {
  114.         if (img.offsetTop <= clientHeight + scrollTop) {
  115.           img.src = img.dataset.src;
  116.         }
  117.       });
  118.     }
  119.   </script>
  120. </html>

4.轮播图

演示http://php.rc238.cn/0526/demo4.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>轮播图</title>
  7.     <style>
  8.       ul,
  9.       li {
  10.         margin: 0;
  11.         padding: 0;
  12.         list-style: none;
  13.       }
  15.       .box {
  16.         /*定位父级*/
  17.         position: relative;
  18.         width: 1000px;
  19.         height: 350px;
  20.         margin: 0 auto;
  21.       }
  23.       .box .slider {
  24.         width: 1000px;
  25.         height: 350px;
  26.         display: none;
  27.       }
  29.       .box .slider.active {
  30.         display: block;
  31.       }
  33.       .box .point-list {
  34.         position: absolute;
  35.         /*绝对定位的环境下的水平居中方式*/
  36.         left: 50%;
  37.         margin-left: -38px;
  38.         top: 310px;
  39.       }
  41.       .box .point-list .point {
  42.         display: inline-block;
  43.         width: 12px;
  44.         height: 12px;
  45.         margin: 0 5px;
  46.         background-color: white;
  47.         border-radius: 100%;
  48.       }
  50.       .box .point-list .point.active {
  51.         background-color: black;
  52.       }
  54.       .box .point-list .point:hover {
  55.         cursor: pointer;
  56.       }
  58.       .skip {
  59.         position: absolute;
  60.         top: 140px;
  61.         display: inline-block;
  62.         width: 40px;
  63.         height: 80px;
  64.         text-align: center;
  65.         line-height: 80px;
  66.         background-color: lightgray;
  67.         color: white;
  68.         opacity: 0.2;
  69.         font-size: 36px;
  70.       }
  72.       .box .prev {
  73.         left: 0;
  74.       }
  76.       .box .next {
  77.         right: 0;
  78.       }
  80.       .box .skip:hover {
  81.         cursor: pointer;
  82.         opacity: 0.5;
  83.         color: black;
  84.       }
  85.     </style>
  86.   </head>
  87.   <body>
  88.     <div class="box">
  89.       <img
  90.         src="banner/banner1.jpg"
  91.         alt=""
  92.         data-index="1"
  93.         class="slider active"
  94.       />
  95.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  96.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  97.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  99.       <div class="point-list"></div>
  101.       <span class="skip prev">&lt;</span>
  102.       <span class="skip next">&gt;</span>
  103.     </div>
  104.   </body>
  105.   <script>
  106.     var cl = console.log;
  107.     //   先拿到要轮播的图片组
  108.     var imgs = document.querySelectorAll(".box > img");
  109.     // cl(imgs);
  110.     var pointList = document.querySelector(".point-list");
  112.     // 动态生成小圆点 index 索引
  113.     imgs.forEach(function (img, index) {
  114.       var span = document.createElement("span");
  115.       if (index === 0) {
  116.         //   默认第一个高亮
  117.         span.classList.add("point", "active");
  118.       }
  119.       span.classList.add("point");
  120.       //   将小圆点与当前图片进行关联
  121.       span.dataset.index = img.dataset.index;
  122.       pointList.appendChild(span);
  123.     });
  124.     // 获取所有小圆点
  125.     var points = document.querySelectorAll(".point");
  126.     // 给小圆点添加点击事件
  127.     pointList.addEventListener(
  128.       "click",
  129.       function (ev) {
  130.         cl(ev.target);
  131.         imgs.forEach(function (img) {
  132.           // 判断
  133.           if (img.dataset.index === ev.target.dataset.index) {
  134.             //   先删除掉所有的active
  135.             imgs.forEach(function (img) {
  136.               img.classList.remove("active");
  137.             });
  138.             // 给当前图片添加active
  139.             img.classList.add("active");
  140.             // 公共函数u:设置小圆点高亮，与图片对应且同步
  141.             setPointActive(img.dataset.index);
  142.           }
  143.         });
  144.       },
  145.       false
  146.     );
  147.     // 公共函数
  148.     function setPointActive(imgIndex) {
  149.       // 删除掉所有active
  150.       points.forEach(function (point) {
  151.         point.classList.remove("active");
  152.         // 给当前与图片对应的小圆点设置高亮
  153.         if (point.dataset.index === imgIndex) {
  154.           point.classList.add("active");
  155.         }
  156.       });
  157.     }
  159.     // 获取到翻页按钮
  160.     var skip = document.querySelectorAll(".skip");
  161.     // 添加点击事件
  162.     skip[0].addEventListener("click", skipImg, false);
  163.     skip[1].addEventListener("click", skipImg, false);
  164.     // 创建函数
  165.     function skipImg(ev) {
  166.       // 先找到图片
  167.       var courrentImg = null;
  168.       // 遍历
  169.       imgs.forEach(function (img) {
  170.         if (img.classList.contains("active")) {
  171.           courrentImg = img;
  172.         }
  173.       });
  174.       //   删除掉图片中的active
  175.       courrentImg.classList.remove("active");
  177.       // 判断是否点击了前一张 当前元素中是否存在prev
  178.       if (ev.target.classList.contains("prev")) {
  179.         courrentImg = courrentImg.previousElementSibling;
  180.         // 判断是否存在前一张
  181.         if (courrentImg !== null && courrentImg.nodeName === "IMG") {
  182.           courrentImg.classList.add("active");
  183.         } else {
  184.           // 否则显示最后一张
  185.           courrentImg = imgs[imgs.length - 1];
  186.           imgs[imgs.length - 1].classList.add("active");
  187.         }
  188.       }
  190.       //   判断是否点击了下一张
  191.       if (ev.target.classList.contains("next")) {
  192.         courrentImg = courrentImg.nextElementSibling;
  193.         // 判断是否存在后一张
  194.         if (courrentImg !== null && courrentImg.nodeName === "IMG") {
  195.           courrentImg.classList.add("active");
  196.         } else {
  197.           // 否则显示第一张
  198.           courrentImg = imgs[0];
  199.           imgs[0].classList.add("active");
  200.         }
  201.       }
  202.       //   小圆点高亮
  203.       setPointActive(courrentImg.dataset.index);
  204.     }
  206.     // 设置定时器
  207.     var box = document.querySelector(".box");
  208.     var timer = null;
  209.     // 鼠标移出启动
  210.     box.addEventListener("mouseout", startTimer, false);
  211.     // 鼠标移入启动
  212.     box.addEventListener("mouseover", clearTimer, false);
  214.     // 启动定时器函数
  215.     function startTimer() {
  216.       var click = new Event("click");
  217.       timer = setInterval(function () {
  218.         skip[1].dispatchEvent(click);
  219.       }, 2000);
  220.     }
  221.     // 清除定时器
  222.     function clearTimer() {
  223.       clearInterval(timer);
  224.     }
  225.   </script>
  226. </html>

5.总结

想要独立完成太难了，只好跟着源码一步一步操作理解每一步的作用这样子，

上一条：js学习：第18章 JS实战选项卡、懒加载、轮播图下一条：会话控制与实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多