本文详解如何用 html、css 和 javascript 实现一个线性（非环形）倒计时器，支持 60 秒自定义时长，进度条从左向右平滑填充，并在剩余 10 秒时变黄、5 秒时变红、归零后保持红色。
本文详解如何用 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 的推荐实践。
