07-14作业 JSON 对象转换字符串 选项卡 懒加载

— 代码区 JSON 对象转换字符串

let jsonStr=`
    [
    {"id":10,"name":"admin","email":"admin@php.cn"},
    {"id":11,"name":"peter","email":"peter@php.cn"},
    {"id":12,"name":"zhu","email":"zhu@php.cn"}
  ]
    `;
  //  console.log(JSON.parse(jsonStr));
    //返回一个"对象数组"
    let users= JSON.parse(jsonStr);
    const table=document.createElement("table");
    table.border="1";
    table.cellPadding="5";
    table.cellSpacing="0";
    users.forEach(user=>{
        let tr=
    ` <tr> 
       <td> ${user.id}</td>
       <td> ${user.name}</td>
       <td> ${user.email}</td>    
    </tr>  
    `;
    table.insertAdjacentHTML("beforeEnd",tr);
    table.insertAdjacentHTml
    });
    table.insertAdjacentHTML('afterBegin','<caption>用户表<caption>');
    document.body.insertAdjacentElement("afterbegin",table);
   //2.json在其他语言中使用
   //想一下，JS对象能不能直接被php处理》
  let book={
    id:"ISBN-123456",
     name:"JacaScript从入门到镜头",
    price:99,
  };
  let str=JSON.stringify(book);
  console.log(str);
//{"id":"ISBN-123456","name":"JacaScript从入门到镜头","price":99}
  console.log(JSON.parse(['{"id":"ISBN-123456","name":"JacaScript从入门到镜头","price":99}']));
  let  user={
      name:"msc",
      sex:"男",
      age:33,
  };
  let str1=JSON.stringify(user);
console.log(str1);
  //转换字符串  {"name":"msc","sex":"男","age":33}
  console.log(JSON.parse(['{"name":"msc","sex":"男","age":33}'
]))

— 选项卡

    <div class="tabs">
      <ul class="tab">
         <li class="active" data-index="1">房产</li>
         <li data-index="2">科技</li>
         <li data-index="3">军事</li>
      </ul>
       <ul data-index="1" class="item active">
           <li><a href="">贵阳学区实现多校划片 </a></li>
           <li><a href="">学区实现多校划片</a></li>
           <li><a href="">学区实现多校划片</a></li>
           <li><a href="">学区实现多校划片</a></li>
           <li><a href="">学区实现多校划片</a></li>
       </ul>
       <ul data-index="2" class="item">
        <li><a href="">B站就服务器故障致歉 </a></li>
        <li><a href="">B站就服务器故障致歉</a></li>
        <li><a href="">B站就服务器故障致歉</a></li>
        <li><a href="">B站就服务器故障致歉</a></li>
        <li><a href="">B站就服务器故障致歉</a></li>
    </ul>
    <ul data-index="3" class="item">
        <li><a href="">印媒渲染阿斯蒂芬玩儿 </a></li>
        <li><a href="">印媒渲染阿斯蒂芬玩儿 </a></li>
        <li><a href="">印媒渲染阿斯蒂芬玩儿 </a></li>
        <li><a href="">印媒渲染阿斯蒂芬玩儿 </a></li>
        <li><a href="">印媒渲染阿斯蒂芬玩儿 </a></li>
    </ul>   
    </div>
    <script>
         /* const res=[3,4,1,3,6,8,10,33,12,24].filter(function(item){
              return item > 5;
          })
          console.log(res);*/
          const tab = document.querySelector(".tab");
          const items=document.querySelectorAll(".item");
          tab.onclick= ev=>{
              //console.log(ev.currentTarget);
             // console.log(ev.target);
              //console.log([...tab.children]);
           [...tab.children].forEach(item=>item.classList.remove("active"));
           ev.target.classList.add("active");
           //根据导航的data-index来全都应该确认哪一个列表设置激活状态
           items.forEach(item=>item.classList.remove("active"));
           //console.log(items);
           const res=[...items]
           .filter(function(item){
               return item.dataset.index === ev.target.dataset.index;
           })
           .shift();
           console.log(res);
          };
    </script>

— 懒加载

    <script>
        /*const box =document.querySelector(".box");
        //box.getBoundingClientRect() 元素相对于可视区的位置
        const rect=box.getBoundingClientRect();
        //窗口中的可视区高度
        console.log(rect);
        //窗口的可视区高度
        console.log(window.innerHeight);*/
        const img=document.images[0];
        window.onscroll=()=>{
   // 获取图片位置小于窗口高度显示图片
          console.log(img.getBoundingClientRect().top);
          if(img.getBoundingClientRect().top<window.innerHeight){
             img.src= img.dataset.src;
          }
        }
    </script>