【零基础JavaScript入门 | Day6】三大实战案例解析｜DOM与定时器深度应用｜从交互逻辑到完整项目开发

最新推荐文章于 2025-10-26 20:44:01 发布

helbyYoung

最新推荐文章于 2025-10-26 20:44:01 发布

阅读量900

点赞数 32

CC 4.0 BY-SA版权

分类专栏： JavaScrip学习文章标签： javascript 交互开发语言

本文链接：https://blog.csdn.net/helbyYoung/article/details/146483961

JavaScrip学习专栏收录该内容

8 篇文章

订阅专栏

【零基础JavaScript入门 | Day6】三大实战案例解析｜DOM与定时器深度应用｜从交互逻辑到完整项目开发

🌟今日知识图谱：
✅ DOM操作 → 元素获取与动态更新
✅ 定时器控制 → setInterval精准调度
✅ 事件驱动 → 状态管理与用户反馈
✅ 数据绑定 → 动态内容渲染技术

📘 案例一：协议阅读倒计时系统

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10">
    欢迎注册！请阅读并同意以下条款：

1. 您需提供真实信息注册账号，并自行保管账号安全  
2. 禁止发布违法内容或侵犯他人权益  
3. 我们依法收集必要信息，承诺保护您的隐私  
4. 因不可抗力导致的服务问题不承担责任  
5. 我们保留根据法律法规调整本协议的权利  

【阅读完毕请点击同意】
  </textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议（10）</button>
  <script>
    const btn = document.querySelector('.btn')
    let i = 10

    let n = setInterval(function () {
      i--
      btn.innerHTML = `我已经阅读用户协议（${i}）`
      if (i == 0) {
        btn.disabled = false
        clearInterval(n)
        btn.innerHTML = `我已经阅读用户协议`

      }
    }, 1000)

  </script>
</body>

</html>

🌟 技术解析：
1️⃣ 定时器原理：

2️⃣ DOM操作要点：

disabled属性控制按钮状态
innerHTML动态更新文本内容
clearInterval释放定时器资源

📘 案例二：静态随机轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 240px;
      height: 450px;
      overflow: hidden;
    }

    .slider-poster {
      width: 100%;
      height: 320px;
    }

    .slider-poster img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-poster">
      <img src="./images/p1.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>魔法石</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const pData = [
      { url: './images/p1.jpg', title: '哈利波特与魔法石', color: 'rgb(36, 156, 200)' },
      { url: './images/p2.jpg', title: '哈利波特与密室', color: 'rgb(43, 35, 26)' },
      { url: './images/p3.jpg', title: '哈利波特与阿兹卡班的囚徒', color: 'rgb(36, 31, 33)' },
      { url: './images/p4.jpg', title: '哈利波特与火焰杯', color: 'rgb(45, 110, 113)' },
      { url: './images/p5.jpg', title: '哈利波特与凤凰社', color: 'rgb(67, 90, 92)' },
      { url: './images/p6.jpg', title: '哈利波特与死亡圣器（上）', color: 'rgb(7, 66, 73)' },
      { url: './images/p7.jpg', title: '哈利波特与死亡圣器（下）', color: 'rgb(53, 29, 25)' },
    ]
    const random = Math.floor(Math.random() * pData.length)
    const img = document.querySelector('.slider-poster img')
    img.src = pData[random].url

    const p = document.querySelector('.slider-footer p')
    p.innerHTML = pData[random].title

    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = pData[random].color

    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    li.classList.add('active')

  </script>
</body>

</html>

🌟 技术解析：
1️⃣ 数据驱动视图流程：

2️⃣ 随机算法核心：

Math.random() * length // 生成0到length-1的随机数
Math.floor() // 向下取整保证整数索引

📘 案例三：自动轮播系统

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 240px;
      height: 450px;
      overflow: hidden;
      margin: 100px auto;
    }

    .slider-poster {
      width: 100%;
      height: 350px;
    }

    .slider-poster img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-poster">
      <img src="./images/p1.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>魔法石</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const pData = [
      { url: './images/p1.jpg', title: '哈利波特与魔法石', color: 'rgb(36, 156, 200)' },
      { url: './images/p2.jpg', title: '哈利波特与密室', color: 'rgb(43, 35, 26)' },
      { url: './images/p3.jpg', title: '哈利波特与阿兹卡班的囚徒', color: 'rgb(36, 31, 33)' },
      { url: './images/p4.jpg', title: '哈利波特与火焰杯', color: 'rgb(45, 110, 113)' },
      { url: './images/p5.jpg', title: '哈利波特与凤凰社', color: 'rgb(67, 90, 92)' },
      { url: './images/p6.jpg', title: '哈利波特与死亡圣器（上）', color: 'rgb(7, 66, 73)' },
      { url: './images/p7.jpg', title: '哈利波特与死亡圣器（下）', color: 'rgb(53, 29, 25)' },
    ]
    // 获取元素
    const img = document.querySelector('.slider-poster img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')

    // 开启定时器
    let i = 0
    setInterval(function () {
      i++
      if (i === pData.length) {
        i = 0
      }
      img.src = pData[i].url
      p.innerHTML = pData[i].title
      document.querySelector('.slider-indicator .active').classList.remove('active')
      const li = document.querySelector(`.slider-indicator li:nth-child(${i + 1})`)
      li.classList.add('active')
      footer.style.backgroundColor = pData[i].color
    }, 1000)


  </script>
</body>

</html>

🌟 技术解析：

1️⃣ 状态同步机制：

// 移除旧状态
document.querySelector('.active').classList.remove('active') 
// 添加新状态
li.classList.add('active')

✨ 完整代码与解析融合说明：

所有HTML/CSS/JS代码保持原始形态
技术解析采用注释式区块分离
Mermaid图表辅助理解执行流程
对比表格突出技术方案差异

需要补充其他说明请随时告知！ 😊