如何在React.js/Next.js中使用JavaScript实现倒计时功能

你原来的原生JS代码直接操作DOM，在React/Next.js里更适合用组件化的方式实现，以下是适配后的完整代码（可直接放到pages/index.js中）：

import { useState, useEffect } from 'react';

export default function Home() {
  // 定义倒计时状态
  const [countdown, setCountdown] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
    isEnded: false
  });

  useEffect(() => {
    // 设置目标时间（和你原代码一致）
    const futureDate = new Date("June 11, 2020 11:30:00").getTime();
    
    // 定义更新倒计时的函数
    const updateTimer = () => {
      const now = new Date().getTime();
      const diff = futureDate - now;

      if (diff <= 0) {
        setCountdown(prev => ({ ...prev, isEnded: true }));
        return;
      }

      // 计算天、时、分、秒
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      setCountdown({
        days,
        hours,
        minutes,
        seconds,
        isEnded: false
      });
    };

    // 初始化执行一次
    updateTimer();
    // 设置每秒更新一次
    const timer = setInterval(updateTimer, 1000);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="countdown-container">
      {countdown.isEnded ? (
        <div>倒计时已结束</div>
      ) : (
        <div id="timer">
          <div>{countdown.days}<span>days</span></div>
          <div>{countdown.hours}<span>hours</span></div>
          <div>{countdown.minutes}<span>minutes</span></div>
          <div>{countdown.seconds}<span>seconds</span></div>
        </div>
      )}
    </div>
  );
}

关键改动说明： #

• 用useState管理倒计时状态，替代原生DOM操作：React通过状态更新自动渲染UI，无需手动修改innerHTML
• 用useEffect处理定时器的创建和清理：确保组件卸载时清除定时器，避免内存泄漏
• 优化时间计算逻辑：直接用取模运算计算剩余的时、分、秒，比原代码的减法更简洁
• 增加倒计时结束判断：当目标时间已过，显示结束提示

样式建议（可选） #

如果需要美化倒计时样式，可添加如下CSS（可放到全局样式文件或CSS模块中）：

.countdown-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

#timer div {
  text-align: center;
  font-size: 1.5rem;
}

#timer span {
  display: block;
  font-size: 0.8rem;
  color: #666;
}

内容的提问来源于stack exchange，提问作者coder