js实战案例演示 - - php.cn博客

toDoList

-实现留言版的效果，最新留言排列在最前面，支持删除

<body>
    <form action="" onsubmit="return false">
      <label for="aaa">打印</label>
      <input type="text" id="aaa" name="aaa" placeholder="回车确认" />
    </form>
    <ul id="bbb"></ul>
    <script>
      // 先获取上面的元素，然后添加事件，使用回车键触发，需要用到keyup这个属性
      const da = document.querySelector("#aaa");
      const kuang = document.querySelector("#bbb");
      //   接下来创建事件
      //   keyup是抬起是触发  keydown是按下时触发
      da.addEventListener("keyup", hanshu, false);
      //   设置hanshu的方法
      function hanshu(ev) {
        if (ev.key === "Enter") {
          console.log(da.value);
          if (da.value.trim().length === 0) {
            alert("不能为空");
            return false;
          }
          //   创建元素,并且创建元素的内容
          const li = document.createElement("li");
          //   创建元素的内容
          li.innerHTML = da.value + ' <button onclick="del(this)">删除</button>';
          //   挂载元素到ul
          //   bbb.appendChild(li);
          if (bbb.childElementCount === 0) {
            bbb.appendChild(li);
          } else {
            bbb.insertBefore(li, kuang.firstElementChild);
          }
          da.value = null;
        }
      }
      //   function del(ele) {
      //     if (confirm("是否删除")) return false;
      //   }
      function del(ele) {
        console.log(ele);
        // 要删除的是button的父元素li
        if (confirm("是否删除")) kuang.removeChild(ele.parentNode);
      }
    </script>
  </body>

效果图

-选项卡

 <script>
      // 使用事件代理
      const tab = document.querySelector(".tab");
      const items = document.querySelectorAll(".item");
      //   这里给导航添加事件
      tab.addEventListener("click", hanshu, false);
      //   事件回调
      function hanshu(ev) {
        // 1.清空之前样式
        Array.from(tab.children).forEach((item) => item.classList.remove("active"));
        // 2.给当前选项添加新样式
        ev.target.classList.toggle("active");
        // 3.清空之前样式, 并将用户当前的选择项激活
        items.forEach((item) => item.classList.remove("active"));
        // 4.根据导航对应的索引项(data-index)来确定将哪个内容区激活
        items.forEach((item) =>
          item.dataset.index === ev.target.dataset.index ? item.classList.toggle("active") : null
        );
      }
    </script>

-效果图

一键换肤

<script>
        document.querySelector(".box").addEventListener("click", (ev)=>(document.body.style.backgroundImage = "url("+ ev.target.src + ")"))
    </script>

-效果图

懒加载案例

      // 获取图片
      const imgs = document.querySelectorAll(".box img");
      //   获取视口的高度
      const shikou = document.documentElement.clientHeight;
      //   监听窗口的滚动事件
      window.addEventListener("scroll", lan, false);
      //   load在页面加载成功时自动执行，
      //   把页面加载成功时的可视区图片加载出来
      window.addEventListener("load", lan, false);
      //   设置函数参数
      function lan() {
        let gdg = document.documentElement.scrollTop;
        // 使用foreach遍历图片滚动高度和视口高度之和石是否小于offsetTop的高度
        imgs.forEach((img) => {
          // shikou和gdg前面已经声明了
          if (img.offsetTop <= shikou + gdg) {
            img.src = img.dataset.src;
            // 如果感觉图片显示太快,可以用定时器来控制一下
            setTimeout(() => {
              img.src = img.dataset.src;
            }, 4000);
          }
        });
      }
    </script>

-效果图