Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript toDoList，延迟加载，幻灯片
Blogger Information
Blog 6
fans 0
comment 0
visits 4960
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
JavaScript toDoList，延迟加载，幻灯片
萨龙龙
Original
678 people have browsed it

简介

原生 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、幻灯片演示地址

演示地址

总结

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

Correcting teacher：天蓬老师天蓬老师

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