用用户填充的数据以及暂停/简历和重置功能进行秒表计数器

Question

给出了两个输入字段“分钟”和“第二个”。 “第二”字段的值可以超过60。需要从上述时间开始创建秒表。

例如。如果分钟为5，第二分钟为30。秒表将从5:30开始，然后持续到分钟和第二个变为0

。如果分钟为5，第二分钟是90。秒表将从6:30开始，然后持续到分钟和第二个。

将有三个按钮，带有“重置”，“暂停/简历”和“启动”按钮。

重置将将秒表重置为用户赋予的字段。 暂停将暂停秒表，如果再次单击，它将恢复。 开始时将开始秒表。

我发现很难创建这样的计时器。请帮忙。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [min, setMin] = useState(0);
  const [sec, setSec] = useState(0);
  const [pause, setPause] = useState(true);

  const totalSeconds = min * 60 + sec;

  function startTimer(duration, display) {
    if (pause === true) {
      var timer = duration,
        minutes,
        seconds;
      const interval = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        console.log(minutes + ":" + seconds);
        setMin(minutes);
        setSec(seconds);

        timer = timer - 1;
        if (timer < 0) {
          clearInterval(interval);
        }
      }, 1000);
    }
  }
  function pauseToggle() {
    setPause(!pause);
    console.log(pause);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        <input
          type="number"
          value={min}
          onChange={(e) => setMin(e.target.value)}
        />
        <input
          type="number"
          value={sec}
          onChange={(e) => setSec(e.target.value)}
        />
      </div>
      <div>
        <button
          onClick={() => {
            startTimer(totalSeconds);
          }}
        >
          START
        </button>
        <button
          onClick={() => {
            pauseToggle();
          }}
        >
          PAUSE/RESUME
        </button>
        <button>RESET</button>
      </div>
      {min}:{sec}
    </div>
  );
}

Answer 1

要启动计时器，您可以按照下面提到的步骤操作。它会帮助您。

步骤1：分钟= 5和秒= 90

步骤2：将所有总分钟和秒转换为总秒

const min = 5;
const seconds = 90;
const totalSeconds = (min * 60) + seconds;

步骤3：创建运行计时器的方法。

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    const interval = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;    
        console.log(minutes + ":" + seconds);

        timer = timer - 1;  
        if (timer < 0) {
           clearInterval(interval);
        } 
    }, 1000);
} 

步骤4：在开始计数器按钮上调用此方法单击