今天所学心得、笔记
1、选卡功能实现（只展示了script代码部分）
<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>
代码演示截图
2、点击图片，换肤，功能实现（只展示了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>
代码演示截图
2、图片懒加载，功能实现（只展示了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>
代码演示截图
2、轮播图，点翻页按钮，点小圆点翻页，自动翻页鼠标移入停止，功能实现（只展示了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]); // 获取当前轮播图index const 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>
代码演示截图
