search

博客列表 >js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）

js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）

培(信仰)
培(信仰)原创
2021年01月27日 15:49:25904浏览

js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）

classList：设置元素的类样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>classList</title>
  7.     <style>
  9.     .red {
  10.         color:red;
  11.     }
  12.     .bg {
  13.         background-color: yellow;
  14.     }
  15.     .green{
  16.         color:green;
  17.     }
  18.     </style>
  19. </head>
  20. <body>
  21.     <!-- <p class="red bg">欢迎</p> -->
  22.     <p>欢迎</p>
  23.     <script>
  24.         const p =document.querySelector("p");
  25.         // p.className='red';
  26.         // p.className='red bg';
  27.         // classList:用来动态的设置元素的类样式
  28.         //对象有属性和方法
  29.         // p.classList.add("red");
  30.         // p.classList.add("bg")
  31.         // p.classList.remove("bg");
  32.         // p.classList.add("green","bg");
  33.         // p.classList.replace("green","red");
  34.         //toggle()动态切换：如果样式表有red 就移除，没有就添加
  35.         p.classList.toggle("red");
  36.     </script>
  37. </body>
  38. </html>

dataset对象：自定义属性

  1.     <!-- id:预定义属性 -->
  2.     <!-- email:自定义属性 -->
  4.     <p id='aaa' data-email='a@php.cn' data-my-age='40' data-index="1">我的资料</p>
  5.     <script>
  6.         const p = document.querySelector("p");
  7.         //使用getAttribute()方法获取自定义属性
  8.         // const email = p.getAttribute("email");
  9.         // console.log(email);
  11.         // dataset:读写自定义属性，但是这个属性在HTML中必须使用 'data-' 为前缀
  12.         // js代码中data- 前缀必须省；之后还有连接线时，连接线必须省去，原连接线后的首字母必须大写
  13.         console.log(p.dataset.email);
  14.         console.log(p.dataset.myAge);
  15.         console.log(p.dataset.index);
  16.     </script>

案例

选项卡

知识点：
数组的遍历： forEach()
数组的筛选： filter()
classList属性：classList.remove(),classList.add()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>选项卡</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #555;
  16.       }
  17.       a:hover {
  18.         text-decoration: underline;
  19.         color: red;
  20.       }
  21.       li {
  22.         list-style: none;
  23.         line-height: 1.6em;
  24.       }
  25.       li:hover{
  26.         cursor:default;
  27.       }
  28.       .tabs {
  29.         width: 300px;
  30.         height: 300px;
  31.         margin: 30px;
  32.         background-color: #e6e6e6;
  34.         display: flex;
  35.         flex-direction: column;
  36.       }
  37.       .tab {
  38.         height: 36px;
  39.         display: flex;
  40.       }
  41.       .tab li {
  42.         flex: auto;
  43.         text-align: center;
  44.         line-height: 36px;
  45.         background-color: #fff;
  46.       }
  47.       .tab li.active {
  48.         background-color: #e6e6e6;
  49.       }
  50.       .tab li:hover {
  51.         cursor: pointer;
  52.       }
  53.       .item{
  54.         padding: 20px;
  55.         display: none;
  56.       }
  57.       .item.active {
  58.         display: block;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="tabs">
  64.       <!-- 导航 -->
  65.       <ul class="tab">
  66.         <li class="active" data-index="1">省内</li>
  67.         <li data-index="2">国内</li>
  68.         <li data-index="3">国际</li>
  69.       </ul>
  70.       <!-- details -->
  71.       <ul data-index="1" class="item active" >
  72.         <li><a href="">省内新闻</a></li>
  73.         <li><a href="">省内新闻省内新闻</a></li>
  74.         <li><a href="">省内新闻省内新闻省内新闻</a></li>
  75.       </ul>
  76.       <ul data-index="2" class="item">
  77.         <li><a href="">国内国内国内国内</a></li>
  78.         <li><a href="">国内国内国内国内国内</a></li>
  79.         <li><a href="">国内国内国内国内</a></li>
  80.       </ul>
  81.       <ul data-index="3" class="item">
  82.         <li><a href="">国际国际国际国际国际国际</a></li>
  83.         <li><a href="">国际国际国际国际国际</a></li>
  84.         <li><a href="">国际国际国际国际</a></li>
  85.       </ul>
  86.     </div>
  87.     <script>
  88.       const tab = document.querySelector(".tab");
  89.       const items = document.querySelectorAll(".item");
  90.       //1. 清空之前所有出于激活状态的选项卡，并将当前点击对象激活
  91.       tab.onclick = (ev) => {
  92.         // 事件绑定对象
  93.         // console.log(ev.currentTarget);
  94.         //事件触发对象
  95.         // console.log(ev.target);
  96.         [...tab.children].forEach((item) => item.classList.remove("active"));
  97.         ev.target.classList.add("active");
  99.         //2. 根据自定义属性data-index找到对应的列表并显示
  100.         //NodeList对象内置了forEach接口
  101.         items.forEach(item => item.classList.remove("active"));
  102.         console.log(ev.target);
  103.         [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");
  104.       };
  105.     </script>
  106.   </body>
  107. </html>

一键换肤

知识点：
动态修改 body.style.backgroundImage 值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>一键换肤</title>
  7.     <style>
  8.         .container {
  9.             width: 300px;
  10.             display: grid;
  11.             grid-template-columns: repeat(3,1fr);
  12.             column-gap:10px;
  14.         }
  15.         .container>img{
  16.             width: 100%;
  17.             border:3px solid #fff;
  18.             opacity: 0.6;
  19.         }
  20.         .container > img:active {
  21.             opacity: 1;
  22.         }
  23.         .container > img:hover {
  24.             opacity: 1;
  25.             cursor:pointer;
  26.             width: 105%;
  27.         }
  28.         body {
  29.             background-image: url("static/images/1.jpg");
  30.             background-repeat: no-repeat;
  31.             background-size: cover;
  32.         }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <img src="static/images/1.jpg" alt="" />
  38.       <img src="static/images/2.jpg" alt="" />
  39.       <img src="static/images/3.jpg" alt="" />
  40.     </div>
  41.     <script>
  42.         //事件代理，不需要给每个图片的缩略图添加点击事件，只需要给父元素添加就可以了
  43.         // document.querySelector(".container").onclick = ev=>document.body.backgroundImage = "url("+ev.target.src+")";
  45.         const box = document.querySelector(".container");
  46.         box.onclick = function (ev) {
  47.           const body = document.body;
  48.           let imgUrl = "url("+ev.target.src+")";
  49.           body.style.backgroundImage = imgUrl;
  50.         }
  51.     </script>
  52.   </body>
  53. </html>

图片懒加载

懒加载原理
先将图片的url地址存到自定义属性 data-src 中,当图片top值<视口+滚动高度时 用 data-src 替换 src值
img.offsetTop < clientHeight + document.documentElement.scrollTop

知识点：setTimeout(),两个事件 scroll,load

  1.         //视口高度
  2.         let viewHeight = document.documentElement.clientHeight;
  3.         //滚动高度
  4.         document.onscroll = ev=>{
  5.             console.log(document.documentElement.scrollTop);
  6.         }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>图片懒加载</title>
  7.     <style>
  8.       .container {
  9.         width: 500px;
  10.         display: grid;
  11.         gap: 10px;
  12.         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  13.       }
  14.       .container img {
  15.         width: 100%;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container">
  21.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  22.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  23.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  24.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  25.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  26.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  27.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  28.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  29.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  30.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  32.     </div>
  33.     <script>
  34.       // const imgs =document.images;
  35.       const images = document.querySelectorAll(".container img");
  36.       const clientHeight = document.documentElement.clientHeight;
  38.       window.addEventListener("scroll", layzyload);
  39.       window.addEventListener("load", layzyload);
  41.       function layzyload() {
  42.         images.forEach((img) => {
  43.           if (img.offsetTop < clientHeight + document.documentElement.scrollTop)
  44.             setTimeout(() => (img.src = img.dataset.src), 500);
  45.         });
  46.       }
  47.       // images
  48.     </script>
  49.   </body>
  50. </html>

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>轮播图</title>
  7.     <link rel="stylesheet" href="banner/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <!-- 1. 图片组 -->
  12.       <nav class="imgs">
  13.         <a href="#"
  14.           ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
  15.         /></a>
  16.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  17.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  18.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  19.       </nav>
  20.       <!-- 2. 图片小按钮 -->
  21.       <nav class="btns">
  22.         <!-- 应该根据图片的数量自动生成 -->
  23.         <!-- <a href="" data-index="1" class="active"></a>
  24.             <a href="" data-index="2"></a>
  25.             <a href="" data-index="3"></a>
  26.             <a href="" data-index="4"></a> -->
  27.       </nav>
  28.       <!-- 3. 翻页按钮 -->
  29.       <nav class="skip">
  30.         <a href="#" class="prev">&lt;</a>
  31.         <a href="#" class="next">&gt;</a>
  32.       </nav>
  33.     </div>
  34.     <script>
  35.       // 所有图片
  36.       const imgs = document.querySelectorAll(".container > .imgs img");
  37.       //按钮组
  38.       const btnGroup = document.querySelector(".container > .btns");
  39.       // 翻页按钮
  40.       const skip = document.querySelectorAll(".container > .skip > a");
  42.       // 创建出一组与图片数量一致的小按钮
  43.       function autoCreateBtns(ele, imgCount) {
  44.         const frag = document.createDocumentFragment();
  45.         for (let i = 0; i < imgCount; i++) {
  46.           const a = document.createElement("a");
  47.           a.href = "#";
  48.           a.dataset.index = i + 1;
  49.           if (i === 0) a.classList.add("active");
  50.           frag.appendChild(a);
  51.         }
  52.         ele.appendChild(frag);
  53.       }
  54.       //   调用创建小按钮的函数
  55.       autoCreateBtns(btnGroup, imgs.length);
  57.       // 为刚刚生成的小按钮添加点击事件
  58.       const btns = document.querySelectorAll(".container > .btns > *");
  59.       // 写两个公共函数
  60.       // 1. 获取激活的元素
  61.       function getActiveEle(eles) {
  62.         let activities = [...eles].filter((img) =>
  63.           img.classList.contains("active")
  64.         );
  65.         return activities.shift();
  66.       }
  67.       // 2. 设置激活元素,根据按钮索引更新正在显示的图片
  68.       function setActiveEle(btnIndex) {
  69.         [imgs, btns].forEach((arr) => {
  70.           // 将之前的状态重置到初始化
  71.           getActiveEle(arr).classList.remove("active");
  72.           arr.forEach((item) => {
  73.             if (item.dataset.index === btnIndex) {
  74.               item.classList.add("active");
  75.             }
  76.           });
  77.         });
  78.       }
  80.       btns.forEach((btn) =>
  81.         btn.addEventListener("click", (ev) =>
  82.           setActiveEle(ev.target.dataset.index)
  83.         )
  84.       );
  86.       let iMax = imgs.length;
  87.       //上一张
  88.       let prevSkip = document.querySelector(".prev");
  89.       prevSkip.addEventListener("click", () => {
  90.         let iIndex = getActiveEle(imgs).dataset.index;
  91.         let iPrev = parseInt(iIndex) - 1;
  93.         iPrev < 1
  94.           ? setActiveEle(iMax.toString())
  95.           : setActiveEle(iPrev.toString());
  96.       });
  97.       //下一张
  98.       let nextSkip = document.querySelector(".next");
  99.       nextSkip.addEventListener("click", () => {
  100.         let iIndex = getActiveEle(imgs).dataset.index;
  101.         let iNext = parseInt(iIndex) + 1;
  103.         iNext > iMax
  104.           ? setActiveEle("1")
  105.           : setActiveEle(iNext.toString());
  106.       });
  107.       //事件派发
  108.       startInterval = function () {
  109.         const ev = new Event("click");
  110.         nextSkip.dispatchEvent(ev);
  111.       };
  112.       //使用间歇式定时器
  113.       let intervalID = setInterval(startInterval, 2000);
  115.       let container = document.querySelector(".container");
  117.       container.addEventListener("mouseover", () => clearInterval(intervalID));
  119.       container.addEventListener(
  120.         "mouseleave",
  121.         () => (intervalID = setInterval(startInterval, 2000))
  122.       );
  124.     </script>
  125.   </body>
  126. </html>

小结：调试过程中因为没有将事件派发封装，直接使用 setInterval() 设置派发造成一直无法达到效果。
由于没有了解setInterval用法造成时间的浪费，吃一堑长一智吧。

上一条：html基础:标签与段落,列表,表格,表单下一条：数据类型转换的一般操作与检测正确性，变量常量定义及操作注意事项
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多