search

博客列表 >JavaScript toDoList，延迟加载，幻灯片

JavaScript toDoList，延迟加载，幻灯片

萨龙龙
萨龙龙原创
2020年05月28日 10:38:04677浏览

简介

原生 JavaScript 代码实现 toDoList、延迟加载、幻灯片，课堂上的四个按钮，选项卡的功能感觉包括在幻灯片中，而幻灯片的逻辑相对复杂，用惯了框架调用，写 JS 代码有点吃力。

作业本来昨天下午就要提交，一直卡在幻灯片的自动播放上，不是很正常。

toDoList 功能代码演示

1、todolist.html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link href="assets/images/logo.png" rel="shortcut icon" />
  8.     <link rel="stylesheet" href="assets/css/style.css">
  9.     <title>toDoList 实例</title>
  10. </head>
  12. <body>
  13.     <div class="container">
  14.         <h3>去旅行吧</h3>
  15.         <div class="input">
  16.             <label for="travel">目的地：</label>
  17.             <input type="text" name="travel" id="travel" autofocus placeholder="输入目的地，按钮回车提交">
  18.         </div>
  19.         <ul class="travel-list">
  20.             <li><span>西藏——拉萨</span><button onclick="delLi(this)"></button></li>
  21.             <li><span>云南——大理</span><button onclick="delLi(this)"></button></li>
  22.         </ul>
  23.         <button class="button" onclick="letsGo()">Let's go</button>
  24.         <div id="status"></div>
  25.     </div>
  27.     <script src="assets/js/todolist-min.js"></script>
  28. </body>
  30. </html>

2、todolist.js 代码

  1. /**
  2.  * toDoList
  3.  */
  5. // 定义控制台
  6. var cl = console.log.bind(console);
  7. // 获取输入框元素
  8. var input = document.querySelector("input");
  9. // 获取列表元素
  10. var ul = document.querySelector(".travel-list");
  12. // 提示
  13. var statusEle = document.getElementById("status");
  14. // 事件
  15. input.addEventListener(
  16.   "keyup",
  17.   function (ev) {
  18.     // 检测键盘是不是按了回车
  19.     if (ev.key === "Enter") {
  20.       /**
  21.        * 输入框为空提示
  22.        */
  23.       var lis = ul.querySelectorAll("li");
  24.       //设置最多5个目的地
  25.       // 为空
  26.       if (input.value.length === 0) {
  27.         statusEle.innerHTML = "请输入内容！";
  28.       } else if (lis.length >= 5) {
  29.         statusEle.innerHTML = "最多5个目的地，不要太贪玩了，哈哈";
  30.       }
  31.       if (input.value.length === 0 || lis.length >= 5) {
  32.         statusEle.className = "active warning";
  33.         /* 显示提交内容 */
  34.         statusEle.style.display = "block";
  35.         /* 2秒后隐藏提示 */
  36.         setTimeout(() => {
  37.           statusEle.style.display = "none";
  38.         }, 2000);
  39.         return false;
  40.       }
  41.       /**
  42.        * 向列表中增加内容
  43.        */
  44.       // 创建 li
  45.       var li = document.createElement("li");
  46.       // 添加内容到 li 中
  47.       li.innerHTML =
  48.         "<span>" +
  49.         input.value +
  50.         "</span>" +
  51.         '<button onclick="delLi(this)"></button>';
  52.       // 将 li 添加到列表中
  53.       if (ul.childNodes === 0) ul.appendChild("li");
  54.       else ul.insertBefore(li, ul.firstElementChild);
  56.       // 清空 input 内容
  57.       input.value = null;
  58.     }
  59.   },
  60.   false
  61. );
  63. // 删除
  64. function delLi(ele) {
  65.   //   cl(ele.parentNode);
  66.   return confirm("确定删除当前目的地？") ? ele.parentNode.remove() : false;
  67. }
  68. // 提交按钮
  69. function letsGo() {
  70.   var lis = ul.querySelectorAll("li");
  71.   if (lis.length === 0) {
  72.     statusEle.innerHTML = "请输入旅行目的地！";
  73.     statusEle.className = "active warning";
  74.   } else {
  75.     statusEle.innerHTML = "好吧，你一个人去吧，我得继续做作业，哈哈";
  76.     statusEle.className = "active success";
  77.   }
  78.   /* 显示提交内容 */
  79.   statusEle.style.display = "block";
  80.   /* 3秒后隐藏提示 */
  81.   setTimeout(() => {
  82.     statusEle.style.display = "none";
  83.   }, 3000);
  84. }

3、toDoList 演示地址

演示地址

图片延迟加载功能代码演示

1、lazyload.html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link href="assets/images/logo.png" rel="shortcut icon" />
  8.     <link rel="stylesheet" href="assets/css/style.css">
  9.     <title>图片延迟加载实例</title>
  10. </head>
  12. <body>
  13.     <div class="container">
  14.         <h3>图片延迟加载</h3>
  15.         <div class="img-list">
  16.             <img src="默认图片地址" alt="图片延迟加载" data-src="真实图片地址">
  17.             100张图片略过……
  18.         </div>
  19.     </div>
  21.     <script src="assets/js/lazyload-min.js"></script>
  22. </body>
  24. </html>

2、lazyload.js 代码

  1. var cl = console.log.bind(console);
  3. // 获取图片元素
  4. var imgs = document.querySelectorAll('.img-list img');
  6. // 获取文档可视区域高度
  7. var clientHeight = document.documentElement.clientHeight;
  9. // 增加浏览器滚动监听事件
  10. window.addEventListener("scroll", function() {
  11.     lazyload(imgs, clientHeight);
  12. }, false);
  14. /*延迟加载函数 */
  15. function lazyload(imgs, clientHeight) {
  16.     /*获取内容区域滚动离顶部的大小*/
  17.     var scrollTop = document.documentElement.scrollTop;
  19.     /*遍历图片，判断图片是否进入的可视区域*/
  20.     imgs.forEach(function(img) {
  21.         if (img.offsetTop <= clientHeight + scrollTop) {
  22.             img.src = img.dataset.src;
  23.             img.style.top = "0";
  24.         }
  25.     });
  26. }

3、图片延迟加载演示地址

演示地址

幻灯片功能代码演示

1、slide.html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link href="assets/images/logo.png" rel="shortcut icon" />
  8.     <link rel="stylesheet" href="assets/css/style.css">
  9.     <title>幻灯片实例</title>
  10. </head>
  12. <body>
  13.     <div class="container">
  14.         <h3>幻灯片实例</h3>
  15.         <div class="slides">
  16.             <!-- 幻灯片图片列表 -->
  17.             <div class="slide-list">
  18.                 <img src="https://demo.salongweb.com/slearn/slider/01.jpg" class="slider active" data-index="1"
  19.                     alt="幻灯片">
  20.                 <img src="https://demo.salongweb.com/slearn/slider/02.jpg" class="slider" data-index="2" alt="幻灯片">
  21.                 <img src="https://demo.salongweb.com/slearn/slider/03.jpg" class="slider" data-index="3" alt="幻灯片">
  22.                 <img src="https://demo.salongweb.com/slearn/slider/04.jpg" class="slider" data-index="4" alt="幻灯片">
  23.             </div>
  24.             <!-- 导航点 -->
  25.             <div class="slide-dots"></div>
  26.             <!-- 上下按钮 -->
  27.             <button class="slide-button slide-prev"><</button>
  28.             <button class="slide-button slide-next">></button>
  29.         </div>
  30.     </div>
  32.     <script src="assets/js/slide-min.js"></script>
  33. </body>
  35. </html>

2、slide.js 代码

  1. var cl = console.log.bind(console);
  2. // 获取所有图片
  3. var imgs = document.querySelectorAll(".slide-list img");
  4. /*获取导航点元素*/
  5. var dotsList = document.querySelector(".slide-dots");
  6. /*获取按钮*/
  7. var buttons = document.querySelectorAll(".slide-button");
  9. /*生成导航点*/
  10. imgs.forEach(function (img, index) {
  11.   /*创建点元素*/
  12.   var span = document.createElement("span");
  13.   /*添加 class*/
  14.   span.classList.add("point");
  15.   /*如果是第一个增加 active*/
  16.   if (index === 0) span.classList.add("active");
  17.   /*将图片上的 index 值添加到点元素上*/
  18.   span.dataset.index = img.dataset.index;
  19.   /*添加点元素到导航元素中*/
  20.   dotsList.appendChild(span);
  21. }, false);
  23. /*获取所有导航点，为之后的当前状态做准备*/
  24. var pointAll = dotsList.querySelectorAll("span");
  26. /*监听点击导航点*/
  27. dotsList.addEventListener(
  28.   "click",
  29.   function (ev) {
  30.     /*点的 index 值*/
  31.     var pointIndex = ev.target.dataset.index;
  32.     /*遍历图片，添加 active*/
  33.     imgs.forEach(function (img, index) {
  34.       /*增加和当前点元素对应的图片 active*/
  35.       if (img.dataset.index === pointIndex) {
  36.         /*遍历图片，删除已有的 active*/
  37.         imgs.forEach(function (img) {
  38.           img.classList.remove("active");
  39.         });
  40.         /*增加 active*/
  41.         img.classList.add("active");
  42.         /*导航点元素的增加和删除 active*/
  43.         dotsActive(img.dataset.index);
  44.       }
  45.     }, false);
  46.   },
  47.   false
  48. );
  50. /*导航点的增加或删除 active*/
  51. function dotsActive(imgIndex) {
  52.   /*先删除 active*/
  53.   pointAll.forEach(function (point) {
  54.     point.classList.remove("active");
  55.   }, false);
  56.   /*再增加与图片对应点的 active*/
  57.   pointAll.forEach(function (point) {
  58.     if (point.dataset.index === imgIndex) {
  59.       point.classList.add("active");
  60.     }
  61.   }, false);
  62. }
  64. /* 当前图片 */
  65. function slideCurrentImg() {
  66.   var currentImg = null;
  67.   /*找到正在显示的图片*/
  68.   imgs.forEach(function (img) {
  69.     if (img.classList.contains("active")) currentImg = img;
  70.   }, false);
  71.   return currentImg;
  72. }
  74. /*为按钮添加点击事件*/
  75. buttons.item(0).addEventListener("click", buttonClick, false);
  76. buttons.item(1).addEventListener("click", buttonClick, false);
  77. /*按钮点击事件*/
  78. function buttonClick(ev) {
  79.   /*找到正在显示的图片*/
  80.   var currentImg = slideCurrentImg();
  82.   /*点击上一个*/
  83.   if (ev.target.classList.contains("slide-prev")) {
  84.     singleButton(
  85.       currentImg,
  86.       imgs[imgs.length - 1],
  87.       currentImg.previousElementSibling
  88.     );
  89.   }
  91.   /*点击下一个*/
  92.   if (ev.target.classList.contains("slide-next")) {
  93.     singleButton(currentImg, imgs[0], currentImg.nextElementSibling);
  94.   }
  96.   /* 点击左右按钮，清除定时器 */
  97.   clearTimer();
  98. }
  100. /*单个按钮事件函数*/
  101. function singleButton(currentImg, index, ele) {
  102.   /*删除当前图片的 active*/
  103.   currentImg.classList.remove("active");
  104.   /*获取上一节点*/
  105.   currentImg = ele;
  107.   /*如果没有上一节点，则为获取最后的节点并增加 active*/
  108.   if (currentImg === null) {
  109.     currentImg = index;
  110.   }
  111.   currentImg.classList.add("active");
  113.   /*导航点元素的增加和删除 active*/
  114.   dotsActive(currentImg.dataset.index);
  115. }
  117. /**
  118.  * 为图片增加自动播放，暂停
  119.  */
  121. var slides = document.querySelector(".slides");
  123. var timer = null;
  125. // 1. 当鼠标移出轮播图区域时, 启动定时器,每2秒自动切换图片
  126. slides.addEventListener("mouseout", startTimer, false);
  127. // 2. 当鼠标移入轮播图区域时,清除定时器,由用户点击操作
  128. slides.addEventListener("mouseover", clearTimer, false);
  130. // 启动定时器
  131. function startTimer() {
  132.   var click = new Event("click");
  133.   setInterval(function () {
  134.     buttons.item(1).dispatchEvent(click);
  135.   }, 2000);
  136. }
  138. // 清除定时器
  139. function clearTimer() {
  140.   clearInterval(timer);
  141. }

3、幻灯片演示地址

演示地址

总结

代码需多写，方能见本领。虽然能听懂老师讲的是什么，但是自己操作时还是遇到很多问题，这些问题也将成为经验吧。

上一条：前端 - JS - 跨域请求下一条：关于nginx与php的配置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多