JavaScript toDoList，延迟加载，幻灯片 - PHP 系统学习之路——JavaScript 开发

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

博主信息

博文 6

粉丝 0

访问量 6861

专题推荐

更多>

简介

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

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

toDoList 功能代码演示

1、todolist.html 代码

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

2、todolist.js 代码

/**
 * toDoList
 */
// 定义控制台
var cl = console.log.bind(console);
// 获取输入框元素
var input = document.querySelector("input");
// 获取列表元素
var ul = document.querySelector(".travel-list");
// 提示
var statusEle = document.getElementById("status");
// 事件
input.addEventListener(
  "keyup",
  function (ev) {
    // 检测键盘是不是按了回车
    if (ev.key === "Enter") {
      /**
       * 输入框为空提示
       */
      var lis = ul.querySelectorAll("li");
      //设置最多5个目的地
      // 为空
      if (input.value.length === 0) {
        statusEle.innerHTML = "请输入内容！";
      } else if (lis.length >= 5) {
        statusEle.innerHTML = "最多5个目的地，不要太贪玩了，哈哈";
      }
      if (input.value.length === 0 || lis.length >= 5) {
        statusEle.className = "active warning";
        /* 显示提交内容 */
        statusEle.style.display = "block";
        /* 2秒后隐藏提示 */
        setTimeout(() => {
          statusEle.style.display = "none";
        }, 2000);
        return false;
      }
      /**
       * 向列表中增加内容
       */
      // 创建 li
      var li = document.createElement("li");
      // 添加内容到 li 中
      li.innerHTML =
        "<span>" +
        input.value +
        "</span>" +
        '<button onclick="delLi(this)"></button>';
      // 将 li 添加到列表中
      if (ul.childNodes === 0) ul.appendChild("li");
      else ul.insertBefore(li, ul.firstElementChild);
      // 清空 input 内容
      input.value = null;
    }
  },
  false
);
// 删除
function delLi(ele) {
  //   cl(ele.parentNode);
  return confirm("确定删除当前目的地？") ? ele.parentNode.remove() : false;
}
// 提交按钮
function letsGo() {
  var lis = ul.querySelectorAll("li");
  if (lis.length === 0) {
    statusEle.innerHTML = "请输入旅行目的地！";
    statusEle.className = "active warning";
  } else {
    statusEle.innerHTML = "好吧，你一个人去吧，我得继续做作业，哈哈";
    statusEle.className = "active success";
  }
  /* 显示提交内容 */
  statusEle.style.display = "block";
  /* 3秒后隐藏提示 */
  setTimeout(() => {
    statusEle.style.display = "none";
  }, 3000);
}

3、toDoList 演示地址

演示地址

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

1、lazyload.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/images/logo.png" rel="shortcut icon" />
    <link rel="stylesheet" href="assets/css/style.css">
    <title>图片延迟加载实例</title>
</head>
<body>
    <div class="container">
        <h3>图片延迟加载</h3>
        <div class="img-list">
            <img src="默认图片地址" alt="图片延迟加载" data-src="真实图片地址">
            100张图片略过……
        </div>
    </div>
    <script src="assets/js/lazyload-min.js"></script>
</body>
</html>

2、lazyload.js 代码

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

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

演示地址

幻灯片功能代码演示

1、slide.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/images/logo.png" rel="shortcut icon" />
    <link rel="stylesheet" href="assets/css/style.css">
    <title>幻灯片实例</title>
</head>
<body>
    <div class="container">
        <h3>幻灯片实例</h3>
        <div class="slides">
            <!-- 幻灯片图片列表 -->
            <div class="slide-list">
                <img src="https://demo.salongweb.com/slearn/slider/01.jpg" class="slider active" data-index="1"
                    alt="幻灯片">
                <img src="https://demo.salongweb.com/slearn/slider/02.jpg" class="slider" data-index="2" alt="幻灯片">
                <img src="https://demo.salongweb.com/slearn/slider/03.jpg" class="slider" data-index="3" alt="幻灯片">
                <img src="https://demo.salongweb.com/slearn/slider/04.jpg" class="slider" data-index="4" alt="幻灯片">
            </div>
            <!-- 导航点 -->
            <div class="slide-dots"></div>
            <!-- 上下按钮 -->
            <button class="slide-button slide-prev"><</button>
            <button class="slide-button slide-next">></button>
        </div>
    </div>
    <script src="assets/js/slide-min.js"></script>
</body>
</html>

2、slide.js 代码

var cl = console.log.bind(console);
// 获取所有图片
var imgs = document.querySelectorAll(".slide-list img");
/*获取导航点元素*/
var dotsList = document.querySelector(".slide-dots");
/*获取按钮*/
var buttons = document.querySelectorAll(".slide-button");
/*生成导航点*/
imgs.forEach(function (img, index) {
  /*创建点元素*/
  var span = document.createElement("span");
  /*添加 class*/
  span.classList.add("point");
  /*如果是第一个增加 active*/
  if (index === 0) span.classList.add("active");
  /*将图片上的 index 值添加到点元素上*/
  span.dataset.index = img.dataset.index;
  /*添加点元素到导航元素中*/
  dotsList.appendChild(span);
}, false);
/*获取所有导航点，为之后的当前状态做准备*/
var pointAll = dotsList.querySelectorAll("span");
/*监听点击导航点*/
dotsList.addEventListener(
  "click",
  function (ev) {
    /*点的 index 值*/
    var pointIndex = ev.target.dataset.index;
    /*遍历图片，添加 active*/
    imgs.forEach(function (img, index) {
      /*增加和当前点元素对应的图片 active*/
      if (img.dataset.index === pointIndex) {
        /*遍历图片，删除已有的 active*/
        imgs.forEach(function (img) {
          img.classList.remove("active");
        });
        /*增加 active*/
        img.classList.add("active");
        /*导航点元素的增加和删除 active*/
        dotsActive(img.dataset.index);
      }
    }, false);
  },
  false
);
/*导航点的增加或删除 active*/
function dotsActive(imgIndex) {
  /*先删除 active*/
  pointAll.forEach(function (point) {
    point.classList.remove("active");
  }, false);
  /*再增加与图片对应点的 active*/
  pointAll.forEach(function (point) {
    if (point.dataset.index === imgIndex) {
      point.classList.add("active");
    }
  }, false);
}
/* 当前图片 */
function slideCurrentImg() {
  var currentImg = null;
  /*找到正在显示的图片*/
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) currentImg = img;
  }, false);
  return currentImg;
}
/*为按钮添加点击事件*/
buttons.item(0).addEventListener("click", buttonClick, false);
buttons.item(1).addEventListener("click", buttonClick, false);
/*按钮点击事件*/
function buttonClick(ev) {
  /*找到正在显示的图片*/
  var currentImg = slideCurrentImg();
  /*点击上一个*/
  if (ev.target.classList.contains("slide-prev")) {
    singleButton(
      currentImg,
      imgs[imgs.length - 1],
      currentImg.previousElementSibling
    );
  }
  /*点击下一个*/
  if (ev.target.classList.contains("slide-next")) {
    singleButton(currentImg, imgs[0], currentImg.nextElementSibling);
  }
  /* 点击左右按钮，清除定时器 */
  clearTimer();
}
/*单个按钮事件函数*/
function singleButton(currentImg, index, ele) {
  /*删除当前图片的 active*/
  currentImg.classList.remove("active");
  /*获取上一节点*/
  currentImg = ele;
  /*如果没有上一节点，则为获取最后的节点并增加 active*/
  if (currentImg === null) {
    currentImg = index;
  }
  currentImg.classList.add("active");
  /*导航点元素的增加和删除 active*/
  dotsActive(currentImg.dataset.index);
}
/**
 * 为图片增加自动播放，暂停
 */
var slides = document.querySelector(".slides");
var timer = null;
// 1. 当鼠标移出轮播图区域时, 启动定时器,每2秒自动切换图片
slides.addEventListener("mouseout", startTimer, false);
// 2. 当鼠标移入轮播图区域时,清除定时器,由用户点击操作
slides.addEventListener("mouseover", clearTimer, false);
// 启动定时器
function startTimer() {
  var click = new Event("click");
  setInterval(function () {
    buttons.item(1).dispatchEvent(click);
  }, 2000);
}
// 清除定时器
function clearTimer() {
  clearInterval(timer);
}