简介
原生 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;}/*** 向列表中增加内容*/// 创建 livar 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);}
3、幻灯片演示地址
总结
代码需多写，方能见本领。虽然能听懂老师讲的是什么，但是自己操作时还是遇到很多问题，这些问题也将成为经验吧。