【问题标题】:How can I offset a 5 minute countdown interval timer by 1 minute, using react JS如何使用 React JS 将 5 分钟倒计时间隔计时器偏移 1 分钟
【发布时间】:2021-03-07 01:28:38
【问题描述】:

我希望在 react JS 中创建一个 5 分钟的间隔计时器,偏移 1 分钟。
我在下面的计时器降落在 1:00 => 1:05 => 1:10 => 1:15 => 1:20。
我需要将此偏移到 1:01 => 1:06 => 1:11 => 1:16 => 1:21。
计时器需要与洛杉矶时区同步。
如果可能的话,寻找最干净的 es7 代码。
我正在使用 NextJS 框架。
这是我到目前为止的代码。

  const [timer, setTimer] = useState("")

  const secondPassed = useCallback( () => {
    const cur_date = new Date();
    const minutes = cur_date.getMinutes();
    const seconds = cur_date.getSeconds();
    console.log( (4 - minutes % 5) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds))
    setTimer( `${(4 - minutes % 5) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds)}` )
  },[])
  
  useEffect(()=>{
    setInterval(secondPassed, 1000)
  },[])

【问题讨论】:

    标签: javascript react-hooks next.js setinterval ecmascript-2016


    【解决方案1】:
    const [time, settime] = useState()
    
    const cur_date = new Date();
    const minutes = cur_date.getMinutes();
    const seconds = cur_date.getSeconds();
    
    if(minutes === "your timing start") {
    settime(minutes) }
    
    if(minutes ==== time + 5 ) {
    settime(minutes)
    }
    

    【讨论】:

    • 虽然此代码可能会回答问题,但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 How to Answer。亲切的问候。
    • 这不能回答我的问题。
    【解决方案2】:

    我将开始日期偏移 1 分钟。

    const [timer, setTimer] = useState("")
    
      const secondPassed = useCallback( () => {
        const cur_date = new Date( Date.now() - 1000 * 60 );
        const minutes = cur_date.getMinutes();
        const seconds = cur_date.getSeconds();
        console.log( (4 - (minutes % 5)) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds))
        setTimer( `${(4 - (minutes % 5)) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds)}` )
      },[])
      
      useEffect(()=>{
        const run = setInterval(secondPassed, 5000)
        return () => clearInterval(run)
      },[])
      
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-09
      • 2020-06-30
      相关资源
      最近更新 更多