登录
首页 >  文章 >  前端

动态倒计时进度条制作教程

时间：2026-04-24 21:43:58 296浏览 收藏

本文手把手教你用纯 HTML、CSS 和 JavaScript 打造一个高性能、视觉反馈精准的线性倒计时进度条——支持 60 秒自定义时长，进度条从左向右平滑伸展，剩余时间实时更新，并在 10 秒时自动变黄、5 秒时骤然转红、归零后锁定警示红色；更巧妙地利用 CSS 自定义属性与 `transform: scaleX()` 实现零重排动画，兼顾流畅性与可维护性，代码简洁完整、开箱即用，是前端新手进阶交互设计的绝佳实践范例。

本文详解如何用 HTML、CSS 和 JavaScript 实现一个线性（非环形）倒计时器，支持 60 秒自定义时长，进度条从左向右平滑填充，并在剩余 10 秒时变黄、5 秒时变红、归零后保持红色。

实现一个直观、响应及时且视觉反馈明确的倒计时进度条，关键在于解耦时间逻辑与样式控制：使用 CSS 自定义属性（--progress 和 --color）驱动视觉变化，配合 transform: scaleX() 实现高性能动画，避免 width 变更引发的布局重排（reflow）。

以下是一个完整、可直接运行的教程实现（已适配问题中要求的 60 秒时长及颜色阈值）：

✅ 完整代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>线性动画倒计时器</title>
  <style>
    /* 全局居中容器 */
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      background: #f8f9fa;
    }

    /* 倒计时组件 */
    .timer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
      width: 300px;
      padding: 1.5rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .timer .display {
      font-size: 3.5rem;
      font-weight: 700;
      color: #333;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .timer .progress-container {
      width: 100%;
      height: 12px;
      background: #e9ecef;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .timer .progress {
      --color: var(--safe);
      --progress: 1;
      background-color: var(--color);
      height: 100%;
      border-radius: 6px;
      transform: scaleX(var(--progress));
      transform-origin: left;
      transition: 
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s ease;
    }

    /* 颜色主题（CSS 变量） */
    :root {
      --safe: #4CAF50;   /* 绿色：>10s */
      --warn: #FFC107;   /* 黄色：≤10s 且 >5s */
      --danger: #F44336; /* 红色：≤5s */
    }
  </style>
</head>
<body>
  <div class="timer">
    <div class="display">60s</div>
    <div class="progress-container">
      <div class="progress"></div>
    </div>
  </div>

  <script>
    // ? 配置项（可自由修改）
    const TOTAL_TIME = 60;              // 总倒计时秒数
    const WARN_THRESHOLD = 10;         // 黄色起始阈值（剩余 ≤10s）
    const DANGER_THRESHOLD = 5;         // 红色起始阈值（剩余 ≤5s）

    // ? DOM 引用
    const displayEl = document.querySelector('.timer .display');
    const progressEl = document.querySelector('.timer .progress');

    let timeLeft = TOTAL_TIME;

    // ✨ 初始化显示
    displayEl.textContent = `${timeLeft}s`;

    // ⏱️ 启动倒计时（使用 async/await + Promise 实现精确逐秒更新）
    (async function countdown() {
      while (timeLeft > 0) {
        await new Promise(resolve => setTimeout(resolve, 1000));

        timeLeft--;
        const progress = timeLeft / TOTAL_TIME;

        // 更新时间显示
        displayEl.textContent = `${timeLeft}s`;

        // 更新进度条缩放比例
        progressEl.style.setProperty('--progress', progress);

        // 动态切换颜色（基于剩余比例）
        if (progress <= DANGER_THRESHOLD / TOTAL_TIME) {
          progressEl.style.setProperty('--color', 'var(--danger)');
        } else if (progress <= WARN_THRESHOLD / TOTAL_TIME) {
          progressEl.style.setProperty('--color', 'var(--warn)');
        } else {
          progressEl.style.setProperty('--color', 'var(--safe)');
        }
      }

      // ⏹️ 结束状态：定格为红色，显示 "0s"
      displayEl.textContent = '0s';
      progressEl.style.setProperty('--progress', 0);
      progressEl.style.setProperty('--color', 'var(--danger)');
    })();
  </script>
</body>
</html>

? 关键设计说明

  • 高性能动画：使用 transform: scaleX() 替代 width，利用 GPU 加速，避免页面重排，确保动画顺滑；
  • 精准阈值控制：颜色切换基于 timeLeft / TOTAL_TIME 的归一化比例计算，不受整数取整误差影响；
  • 声明式样式管理：所有颜色与进度均通过 CSS 自定义属性控制，便于主题扩展（如暗色模式、多语言适配）；
  • 语义清晰的结构：.progress-container 提供边框与背景，.progress 仅负责动态内容，职责分离明确。

⚠️ 注意事项

  • 若需支持暂停/重启/重置功能，建议将 countdown() 封装为类或使用 AbortController 管理异步循环；
  • 在移动端，setTimeout 可能因页面后台运行而降频，如需高精度计时（如游戏场景），应结合 performance.now() 校准实际流逝时间；
  • 当 TOTAL_TIME 较大（如 ≥3600 秒），建议增强 formatTime() 函数以支持 mm:ss 或 hh:mm:ss 格式（当前示例为纯秒数，简洁易读）。

该方案轻量、可维护性强，且完全符合原始需求：60 秒线性倒计时、绿色→黄色→红色渐进变色、结束锁定红色——是现代 Web 应用中倒计时 UI 的推荐实践。

本篇关于《动态倒计时进度条制作教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>