APIs学习小记5 - 技术栈

一、学习内容概述

本次学习围绕HTML、CSS和JavaScript的综合应用，通过三个实例深入理解了DOM操作、事件监听以及定时器的使用，包括随机点名、点击关闭元素和轮播图功能的实现。

二、实例分析

1. 随机点名

功能描述：实现一个随机点名系统，点击"开始"按钮开始随机显示姓名，点击"结束"按钮停止并移除已抽取的姓名。
代码摘要

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <!-- 省略头部样式部分 -->
  <body>
    <h2>随机点名</h2>
    <div class="box">
      <span>名字是：</span>
      <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
      <button class="start">开始</button>
      <button class="end">结束</button>
    </div>
    <script>
      const arr = ['马超', '黄忠', '赵云', '关羽', '张飞'];
      let timerId = 0;
      let random = 0;
      const qs = document.querySelector('.qs');
      const start = document.querySelector('.start');
      start.addEventListener('click', function () {
        timerId = setInterval(function () {
          random = parseInt(Math.random() * arr.length);
          qs.innerHTML = arr[random];
        }, 35);
        if (arr.length === 1) {
          start.disabled = end.disabled = true;
        }
      });
      const end = document.querySelector('.end');
      end.addEventListener('click', function () {
        clearInterval(timerId);
        arr.splice(random, 1);
      });
    </script>
  </body>
</html>

关键知识点
- setInterval 函数用于定时执行代码。
- Math.random() 生成随机数。
- splice 方法用于删除数组元素。

2. 点击关闭

功能描述：点击元素上的关闭按钮，隐藏该元素。
代码摘要

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <!-- 省略头部样式部分 -->
  <body>
    <div class="box">
      我是美女
      <div class="box1">X</div>
    </div>
    <script>
      const box1 = document.querySelector('.box1');
      const box = document.querySelector('.box');
      box1.addEventListener('click', function () {
        box.style.display = 'none';
      });
    </script>
  </body>
</html>

关键知识点
- querySelector 方法用于选择DOM元素。
- addEventListener 方法用于监听事件。
- 通过修改元素的 style 属性来改变元素的显示状态。

3. 轮播图完整版

功能描述：实现一个可点击切换图片、自动播放且鼠标悬停停止的轮播图。
代码摘要

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <!-- 省略头部样式部分 -->
  <body>
    <div class="slider">
      <div class="slider-wrapper">
        <img src="./images/slider01.jpg" alt="" />
      </div>
      <div class="slider-footer">
        <p>对人类来说会不会太超前了？</p>
        <ul class="slider-indicator">
          <li class="active"></li>
          <!-- 省略其他li -->
        </ul>
        <div class="toggle">
          <button class="prev">&lt;</button>
          <button class="next">&gt;</button>
        </div>
      </div>
    </div>
    <script>
      const data = [
        { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
        // 省略其他数据项
      ];
      const img = document.querySelector('.slider-wrapper img');
      const p = document.querySelector('.slider-footer p');
      const footer = document.querySelector('.slider-footer');
      const next = document.querySelector('.next');
      const prev = document.querySelector('.prev');
      let i = 0;
      next.addEventListener('click', function () {
        i = i >= data.length ? 0 : i + 1;
        toggle();
      });
      prev.addEventListener('click', function () {
        i = i < 0 ? data.length - 1 : i - 1;
        toggle();
      });
      function toggle() {
        img.src = data[i].url;
        p.innerHTML = data[i].title;
        footer.style.backgroundColor = data[i].color;
        document.querySelector('.slider-indicator .active').classList.remove('active');
        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active');
      }
      let timerId = setInterval(function () {
        next.click();
      }, 1000);
      const slider = document.querySelector('.slider');
      slider.addEventListener('mouseenter', function () {
        clearInterval(timerId);
      });
      slider.addEventListener('mouseleave', function () {
        if (timerId) clearInterval(timerId);
        timerId = setInterval(function () {
          next.click();
        }, 1000);
      });
    </script>
  </body>
</html>

关键知识点
- 使用数组存储数据，方便统一管理。
- 通过 click 方法模拟按钮点击事件。
- setInterval 和 clearInterval 实现自动播放和停止功能。
- classList 属性用于添加和移除类名。

三、总结

通过这三个实例的学习，对DOM操作、事件监听和定时器的使用有了更深入的理解。在实际开发中，可以根据这些知识实现各种交互效果，提高页面的用户体验。