DaisyUI / Next.Js 倒计时不显示 3 位数字

Question

因此，我是 Next.js 网站的倒计时，并且正在使用 daisyUI 倒计时组件，但天数高于 99 的任何数字都无法正确呈现，如下所示：

所以最初我有一个简单的倒计时：

 const targetDate = new Date('2024-09-01T07:00:00');

  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });


 
  useEffect(() => {
    const updateCountdown = () => {
      const currentTime = new Date();
      const difference = targetDate - currentTime;

      if (difference < 0) {
        clearInterval(intervalId);
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
 
      } else {
 
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
        setTimeLeft({ days, hours, minutes, seconds });
      }
    };

    const intervalId = setInterval(updateCountdown, 1000);
    return () => clearInterval(intervalId);
  }, [targetDate]);

这就是我渲染倒计时的方式

 <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
          <div className="flex flex-col" style={{ marginBottom: '10px' }}>
            <span className="countdown font-mono text-5xl text-black">
           
              <span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
            </span>
            days
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.hours).padStart(2, '0') }}>{String(timeLeft.hours).padStart(2, '0')}</span>
            </span>
            hours
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.minutes).padStart(2, '0') }}>{String(timeLeft.minutes).padStart(2, '0')}</span>
            </span>
            min
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.seconds).padStart(2, '0') }}>{String(timeLeft.seconds).padStart(2, '0')}</span>
            </span>
            sec
          </div>

        </div>

我已经添加了

String(timeLeft.seconds).padStart(3, '0') 

尝试解决此问题但无济于事

关于如何解决这个问题有什么想法吗？

Answer 1

最可能的原因是您的号码现在有 3 位数字，导致它呈现在您看不到的其他地方。你的

countdown

班上有什么？

您也不需要同时使用

--value

和

{..}

，最好坚持使用插值：

 <div className="flex flex-col">
     <span className="countdown font-mono text-5xl text-black">
         {String(timeLeft.seconds).padStart(2, '0')}
     </span>
    sec
 </div>