reactHooks实现取当前时刻分钟为5或5的倍数实现5分钟粒度每秒倒计时

最新推荐文章于 2024-08-06 08:48:34 发布

原创最新推荐文章于 2024-08-06 08:48:34 发布 · 322 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

该代码示例展示了如何使用React的useState和useEffecthooks来创建一个倒计时器，它每5分钟重置一次。它跟踪当前分钟数，计算距离下一个5分钟的秒数，并每秒更新状态。当倒计时归零时，它会显示提示信息。

可以使用useEffect和useState来实现这个功能。具体实现步骤如下：

使用useState来保存当前时刻的分钟数和计算出距离下一个5分钟的秒数。


const [currentMinute, setCurrentMinute] = useState(new Date().getMinutes());
const [secondsToNextFive, setSecondsToNextFive] = useState(
  (5 - (currentMinute % 5)) * 60 - new Date().getSeconds()
);

使用useEffect来更新状态值，每秒钟计算一次距离下一个5分钟的秒数。


useEffect(() => {
  const intervalId = setInterval(() => {
    const currentMinute = new Date().getMinutes();
    setCurrentMinute(currentMinute);
    setSecondsToNextFive(
      (5 - (currentMinute % 5)) * 60 - new Date().getSeconds()
    );
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

使用Math.floor函数来计算倒计时的分钟数和秒数，并且使用条件渲染来判断是否需要显示倒计时。


const minutesLeft = Math.floor(secondsToNextFive / 60);
const secondsLeft = secondsToNextFive % 60;

return (
  <div>
    {minutesLeft === 0 && secondsLeft === 0 ? (
      <p>It's a multiple of 5 minute!</p>
    ) : (
      <p>
        {`Next multiple of 5 minute: ${minutesLeft}m ${secondsLeft}s`}
      </p>
    )}
  </div>
);

完整代码如下：


import React, { useState, useEffect } from "react";

function Countdown() {
  const [currentMinute, setCurrentMinute] = useState(new Date().getMinutes());
  const [secondsToNextFive, setSecondsToNextFive] = useState(
    (5 - (currentMinute % 5)) * 60 - new Date().getSeconds()
  );

  useEffect(() => {
    const intervalId = setInterval(() => {
      const currentMinute = new Date().getMinutes();
      setCurrentMinute(currentMinute);
      setSecondsToNextFive(
        (5 - (currentMinute % 5)) * 60 - new Date().getSeconds()
      );
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const minutesLeft = Math.floor(secondsToNextFive / 60);
  const secondsLeft = secondsToNextFive % 60;

  return (
    <div>
      {minutesLeft === 0 && secondsLeft === 0 ? (
        <p>It's a multiple of 5 minute!</p>
      ) : (
        <p>
          {`Next multiple of 5 minute: ${minutesLeft}m ${secondsLeft}s`}
        </p>
      )}
    </div>
  );
}

export default Countdown;

标签

#前端 #javascript