(1106)js 选项卡和 todolist

js 选项卡和 todolist

1. 留言板

<div class="container">
  <input type="text" placeholder="请输入留言内容" />
  <ul></ul>
</div>

const input = document.querySelector("input");
input.addEventListener("keyup", handleAddBlod, false);
function handleAddBlod(e) {
  if (e.key == "Enter") {
    const ul = document.querySelector(".container ul");
    const li = document.createElement("li");
    li.innerHTML = `${input.value}    <button onClick='del(this)'>删除</button>`;
    if (ul.childElementCount == 0) {
      ul.appendChild(li);
    } else {
      ul.insertBefore(li, ul.firstElementChild);
    }
  }
}
function del(params) {
  params.parentNode.remove();
}

2.tab 选项卡

<div class="tabs">
  <ul class="tab">
    <li class="active" data-index="1">选项卡1</li>
    <li data-index="2">选项卡2</li>
    <li data-index="3">选项卡3</li>
  </ul>
  <ul class="item active" data-index="1">
    <li>第一</li>
    <li>第一</li>
    <li>第一</li>
  </ul>
  <ul class="item" data-index="2">
    <li>第二</li>
    <li>第二</li>
    <li>第二</li>
  </ul>
  <ul class="item" data-index="3">
    <li>第三</li>
    <li>第三</li>
    <li>第三</li>
  </ul>
</div>
![](./02.png)

const tab = document.querySelector("ul");
//   console.log(tab.children[1]); //用来湖从htmlcollection获取元素节点
tab.addEventListener("click", handleTabChange, false);
tab.addEventListener("mouseover", handleTabChange, false);
function handleTabChange(ev) {
  const index = ev.target.dataset.index;
  Array.from(tab.children).forEach((element) => {
    element.classList.remove("active");
  });
  ev.target.classList.add("active");
  //    内容区的代码
  items.forEach((item) => {
    // 1删掉acitive
    // 2添加active
    item.dataset.index == index
      ? item.classList.add("active")
      : item.classList.remove("active");
  });
}
//  2.内容去的显示与隐藏
const items = document.querySelectorAll(".tabs .item");

3.一键换肤

<div class="container">
  <img src="./images/1.jpg" alt="" />
  <img src="./images//10.jpg" alt="" />
  <img src="./images//13.jpg" alt="" />
</div>

const imgs = document.querySelector(".container");
imgs.addEventListener("click", function (ev) {
  console.log(ev.target.src);
  document.body.style.backgroundImage = `url(${ev.target.src})`;
});

4.图片懒加载

// 通过事件监听
// 滚动高度scorryTop 视口高度clientHeight 元素Y轴位置offset 文档高度
const clientHeight = document.documentElement.clientHeight;
const imgs = document.querySelectorAll("img");
window.addEventListener("scroll", scroll, false);
window.addEventListener("load", scroll, false);
function scroll() {
  const scrollTop = document.documentElement.scrollTop;
  // 元素Y洲位置  小于 视口高度加滚动高度
  imgs.forEach((img) => {
    if (img.offsetTop <= clientHeight + scrollTop) {
      img.src = img.dataset.src;
    }
  });
}