如何实现一个优雅的倒计时组件

1. 设计思路

倒计时组件需要实现以下核心功能：

• 支持设置目标时间
• 实时显示剩余时间
• 时间格式化显示
• 倒计时结束回调

2. 代码实现

2.1 HTML结构

<div class="countdown-container">
  <div class="countdown-display">
    <div class="time-unit">
      <span class="time-value" id="days">00</span>
      <span class="time-label">天</span>
    </div>
    <div class="time-unit">
      <span class="time-value" id="hours">00</span>
      <span class="time-label">时</span>
    </div>
    <div class="time-unit">
      <span class="time-value" id="minutes">00</span>
      <span class="time-label">分</span>
    </div>
    <div class="time-unit">
      <span class="time-value" id="seconds">00</span>
      <span class="time-label">秒</span>
    </div>
  </div>
</div>

2.2 CSS样式

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.countdown-display {
  display: flex;
  gap: 15px;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
  padding: 10px 15px;
  border-radius: 8px;
  min-width: 60px;
}

.time-value {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.time-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

2.3 JavaScript逻辑

class Countdown {
  constructor(targetDate, onComplete) {
    this.targetDate = new Date(targetDate).getTime();
    this.onComplete = onComplete;
    this.timer = null;
    this.isRunning = false;
  }

  start() {
    if (this.isRunning) return;
    
    this.isRunning = true;
    this.updateCountdown();
    this.timer = setInterval(() => this.updateCountdown(), 1000);
  }

  stop() {
    this.isRunning = false;
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  updateCountdown() {
    const now = new Date().getTime();
    const distance = this.targetDate - now;

    if (distance < 0) {
      this.stop();
      if (this.onComplete) this.onComplete();
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    this.updateDisplay(days, hours, minutes, seconds);
  }

  updateDisplay(days, hours, minutes, seconds) {
    const pad = (num) => num.toString().padStart(2, '0');
    
    document.getElementById('days').textContent = pad(days);
    document.getElementById('hours').textContent = pad(hours);
    document.getElementById('minutes').textContent = pad(minutes);
    document.getElementById('seconds').textContent = pad(seconds);
  }
}

// 使用示例
const countdown = new Countdown('2024-12-31T23:59:59', () => {
  console.log('倒计时结束！');
});

countdown.start();

3. 功能扩展

3.1 添加暂停/继续功能

class EnhancedCountdown extends Countdown {
  constructor(targetDate, onComplete) {
    super(targetDate, onComplete);
    this.remainingTime = 0;
    this.isPaused = false;
  }

  pause() {
    if (!this.isRunning || this.isPaused) return;
    
    this.isPaused = true;
    clearInterval(this.timer);
    this.remainingTime = this.targetDate - new Date().getTime();
  }

  resume() {
    if (!this.isPaused) return;
    
    this.isPaused = false;
    this.targetDate = new Date().getTime() + this.remainingTime;
    this.timer = setInterval(() => this.updateCountdown(), 1000);
  }
}

3.2 添加自定义格式化

class CustomCountdown extends Countdown {
  formatTime(days, hours, minutes, seconds) {
    if (days > 0) {
      return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    } else if (hours > 0) {
      return `${hours}小时 ${minutes}分钟 ${seconds}秒`;
    } else {
      return `${minutes}分钟 ${seconds}秒`;
    }
  }
}

4. 注意事项

1. 时区处理：目标时间需要考虑时区差异
2. 性能优化：避免频繁的DOM操作
3. 内存管理：及时清理定时器
4. 错误处理：验证输入的时间格式

5. 浏览器兼容性

• 支持所有现代浏览器
• IE10+需要polyfill
• 移动端兼容良好

6. 总结

通过以上实现，我们创建了一个功能完整、样式优雅的倒计时组件。该组件具有以下特点：

• 模块化设计，易于维护
• 支持扩展和自定义
• 良好的用户体验
• 完善的错误处理

可以根据具体需求进一步扩展功能，如添加动画效果、支持多种时间格式等。