js任务列表、选项卡、换肤和懒加载

1 效果

2 代码

2.1 任务列表

let enter_add = document.querySelector("#Do"); //1.拿到输入框
      enter_add.addEventListener("keyup", addDo, false); //2.加键盘按键松开事件
      //3.添加任务函数
      function addDo(ev) {
        //4.判断按键是enter
        if (ev.key === "Enter") {
          //5.判断没内容时
          if (enter_add.value.trim().length === 0) {
            alert("请您输入任务，再回车！"); //提示
            return false; //退出函数
          }
          //6.有内容时创建元素
          let li = document.createElement("li");
          li.innerHTML = enter_add.value.trim() + '----><button onclick="del(this)">删除任务</button>';
          //7.没任务时直接加子元素，有任务时加最上边儿
          if (doList.childElementCount === 0) {
            doList.appendChild(li);
          } else {
            doList.insertBefore(li, doList.firstElementChild);
          }
        }
      }
      let doList = document.querySelector("#doList");
      function del(ele) {
        //8.确认删除
        confirm("是否删除") ? doList.removeChild(ele.parentNode) : false;
      }

2.2 选项卡加换肤

let tab_ul = document.querySelector(".tab"); //1.tab头
      let items_ul = document.querySelectorAll(".item"); //2.tab页
      let background_img = document.querySelectorAll(".container>img"); //图片元素
      tab_ul.addEventListener("mouseover", tab_show, false); //3.监听tab头，鼠标移入
      //4.切换tab
      function tab_show(ev) {
        Array.from(tab_ul.children).forEach((li) => li.classList.remove("active")); //4.1移除tab头激活态
        ev.target.classList.toggle("active"); //4.2激活当前tab头
        items_ul.forEach((ul) => ul.classList.remove("active")); //4.3移除tab页激活态
        items_ul.forEach((ul) =>
          ev.target.dataset.index === ul.dataset.index ? ul.classList.toggle("active") : false
        ); //4.4激活当前tab页
        //console.log(background_img);
        background_img.forEach((img) =>
          ev.target.dataset.index === img.dataset.index
            ? (document.querySelector(".tabs").style.backgroundImage = "url(" + img.src + ")")
            : false
        ); //换肤
      }

2.3 懒加载

let imgs = document.querySelectorAll(".container img"); //1.获取图片
      let clientHeight = document.documentElement.clientHeight; //2.视口高度
      window.addEventListener("scroll", idleLoad, false); //3.窗口滚动监听
      window.addEventListener("load", idleLoad, false); //4.窗口加载监听
      //   document.documentElement.clientWidth
      //   document.documentElement.clientLeft
      //   document.documentElement.clientTop
      //5.懒加载函数
      function idleLoad() {
        let scrollTop = document.documentElement.scrollTop; //6.获取滚动条顶边儿到视口顶边儿高度
        imgs.forEach((img) => {
          //比较图片到视口顶边儿的距离 <= 视口高度 + 滚动条顶边儿到视口顶边儿高度
          img.offsetTop <= clientHeight + scrollTop ? (img.src = img.dataset.src) : false;
        });
      }

3 总结

感谢老师教导！
实战作业，好玩儿。