![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
<script>// 事件代理，获取tab导航栏点击的按钮const tab = document.querySelector(".tab");// 获取详细内容三个列表, 数组const items = document.querySelectorAll(".item");tab.onclick = ev => {// // 事件的绑定对象// console.log(ev.currentTarget);// // 事件触发对象// console.log(ev.target);// 1. 清空之前所有处于激活状态的选项卡,并将当前点击对象激活// console.log([...tab.children])[...tab.children].forEach(ev => ev.classList.remove("active"));ev.target.classList.add("active");// 2. 根据自定义属性data-index找到对应的列表并显示出来// items是NodeList对象, 内置了forEach接口items.forEach(ev => ev.classList.remove("active"));// 老师原版写法, 拿到与tab导航栏id 一致的ul元素，添加active样式// [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");// 自己理解写法，拿到与tab导航栏id 一致的ul元素，添加active样式let item = [...items].filter(function (item) {return item.dataset.index === ev.target.dataset.index;});// 返回的item是一个新数组，要拿到ul列表元素要加上序号[0]// console.log(item);// console.log(item[0]);item[0].classList.add("active"); //添加active样式}</script>
<script>//事件代理,就不需要给每个图片的缩略图添加点击事件,只需要给它的父级加就可以了// 老师写法// document.querySelector(".container").onclick = ev =>// (document.body.style.backgroundImage = "url(" + ev.target.src + ")");// 写法1, 匿名函数, ev=>{}------------------------------------// document.querySelector(".container").onclick = ev => {// // 清空所有小图active样式// let items = document.querySelector(".container").children;// // console.log(items[0]);// for (let i=0; i<items.length; i++) {// items[i].classList.remove("active");// }// // 设置body背景图片// document.body.style.background = "url('" + ev.target.src + "')";// // 小图添加active样式// ev.target.classList.add("active");// }// 写法2, function()函数, function(ev)=>{}-------------------------// const items = document.querySelector(".container");// // console.log( items);// items.onclick = function (ev) {// // 清空所有小图active样式// for (let i=0; i<items.children.length; i++) {// items.children[i].classList.remove("active");// }// // 设置body背景图片// document.body.style.background = "url('" + ev.target.src + "')";// // 小图添加active样式// ev.target.classList.add("active");// }// 写法3, addEventListener方法添加事件--------------------------// 3.1写法// document.querySelector(".container").addEventListener('click', ev =>// (document.body.style.backgroundImage = "url(" + ev.target.src + ")")// );// 3.2写法document.querySelector(".container").addEventListener('click', ev =>{// 清空所有小图active样式let items = document.querySelector(".container").children;// console.log(items[0]);for (let i=0; i<items.length; i++) {items[i].classList.remove("active");}// 设置body背景图片document.body.style.background = "url('" + ev.target.src + "') no-repeat";// 小图添加active样式ev.target.classList.add("active");});// 课后再理解：// onclick与addEventListener区别// 1.onclick事件在同一时间只能指向唯一对象// 2.addEventListener给一个事件注册多个listener// 3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML// 4.addEventListener可以控制listener的触发阶段(捕获/冒泡);// 第三个参数：true捕获阶段， false冒泡阶段，默认false;// 可以手动使用removeEventListener清除绑定</script>
<script>// 获取所有图片元素const imgs = document.querySelectorAll(".container img");// 获取视口高度const clientH = document.documentElement.clientHeight;console.log("视口高度" + clientH);//添加监听滚动事件window.addEventListener("scroll", lazyLoad);//启动加载lazyLoad()函数，防止空白页面window.addEventListener("load", lazyLoad);// lazyLoad(); //不能用此方法，用此方法，拿到的图片偏移量不正确function lazyLoad() {// 获取视口滚动高度let scrollTop = document.documentElement.scrollTop;console.log("滚动高度：" + scrollTop);// 循环判断图片离顶部高度(img.offsetTop)，判断是否进入到了可视区, 是否小于(视口高度 + 滚动高度)imgs.forEach((img,index) => {console.log("图片"+ index +"偏移量:" + img.offsetTop + "=====" + (img.offsetTop < clientH + scrollTop));if (img.offsetTop < clientH + scrollTop) {// 设置显示延时setTimeout(() => (img.src = img.dataset.src), 800)}});}</script>
<script>// 拿到所有的图片const imgs = document.querySelectorAll(".container img");// 拿到所有轮播图，指示器const btnGroup = document.querySelector(".btns");// 拿到翻页按钮const skips = document.querySelector(".skip");// 创建指示器函数，作用：创建一组与轮播图数量一致的指示器function autoCreateBtns(ele, imgLengh) {const frag = document.createDocumentFragment();for(let i=0; i<imgLengh; i++) {const a = document.createElement("a");a.href = "#";a.dataset.index = i + 1;if(i === 0) a.classList.add("active");frag.appendChild(a);}ele.appendChild(frag);}// 执行autoCreateBtns()函数，添加轮播图指示器组件autoCreateBtns(btnGroup, imgs.length);// 拿到添加的轮播图指示器const btns = document.querySelectorAll(".btns > *");// 为指示器添加响应事件btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));// btns.forEach(btn => btn.addEventListener("click", ev => console.log(ev.target.dataset.index) ));// 给翻页按钮添加响应事件skips.addEventListener("click", ev => {// console.log(ev.target.classList[0]);// 获取当前轮播图indexconst currentIndex = parseInt(getActiveEle(imgs).dataset.index);// console.log(typeof (currentIndex));//获取轮播图数量const imgsLengh = imgs.length;// 判断到1号图片后，index值置4，如果到4号图片，反之；// setActiveEle()函数里，判断条件用的(完全等于) ===，所以这里要用 //toString()，转字符串if(ev.target.classList[0] === "prev") {// console.log(currentIndex === "1" ? 4 : currentIndex-1);setActiveEle((currentIndex === 1 ? imgsLengh : currentIndex-1).toString());}else {// console.log((currentIndex === imgsLengh ? 1 : currentIndex+1).toString());setActiveEle((currentIndex === imgsLengh ? 1 : currentIndex+1).toString());}});// 自动播放函数，鼠标移入停止播放// 定义定时器let timer = null;// 页面加载，启动自动播放函数autoMove();// 获取轮播图总容器const container = document.querySelector(".container");container.addEventListener("mouseout", autoMove); //添加鼠标移出事件//添加鼠标移入事件，清除定时器;container.addEventListener("mouseover", () => clearInterval(timer));// 自动播放轮播图函数，模拟点击next按钮function autoMove() {timer = setInterval(() => document.querySelector(".next").click(), 800);}// 声明二个公共函数// 获取激活元素function getActiveEle(eles) {let activities = [...eles].filter(img => img.classList.contains("active")); //返回一个新的数组// let activities = [...eles].filter(img => img.dataset.index == 3);return activities.shift(); //从数组中取出元素，shift()从前面取，pop()从后面取;}// 2. 设置激活的元素,根据index索引更新正在显示的图片, 和指示器样式function setActiveEle(btnIndex) {[imgs, btns].forEach(arr => {// 老师原版写法，移除元素active样式// getActiveEle(arr).classList.remove("active");// 自己写法，移除元素active样式arr.forEach(item => {item.classList.remove("active");});arr.forEach(item => {if(item.dataset.index === btnIndex) {item.classList.add("active");}})})}</script>
