js 選項(xiàng)卡和 todolist

1. 留言板

<div class="container">
  <input type="text" placeholder="請(qǐng)輸入留言?xún)?nèi)容" />
  <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 選項(xiàng)卡

<div class="tabs">
  <ul class="tab">
    <li class="active" data-index="1">選項(xiàng)卡1</li>
    <li data-index="2">選項(xiàng)卡2</li>
    <li data-index="3">選項(xiàng)卡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]); //用來(lái)湖從htmlcollection獲取元素節(jié)點(diǎn)
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");
  //    內(nèi)容區(qū)的代碼
  items.forEach((item) => {
    // 1刪掉acitive
    // 2添加active
    item.dataset.index == index
      ? item.classList.add("active")
      : item.classList.remove("active");
  });
}
//  2.內(nèi)容去的顯示與隱藏
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.圖片懶加載

// 通過(guò)事件監(jiān)聽(tīng)
// 滾動(dòng)高度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洲位置  小于 視口高度加滾動(dòng)高度
  imgs.forEach((img) => {
    if (img.offsetTop <= clientHeight + scrollTop) {
      img.src = img.dataset.src;
    }
  });
}

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：不知你是否理解了, 沒(méi)有作業(yè)總結(jié) , 直接放個(gè)源碼, 這樣不好的, 老師不是要看這個(gè)