制作具有用户填充数据和暂停/恢复及重置功能的秒表计数器

Question

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

例如：如果分钟是5，第二分钟是30。秒表将从5:30开始，然后一直持续到分钟和第二分钟都变成0。

例如：如果分钟是5，第二分钟是90。秒表将从6:30开始，然后一直持续到分钟和第二分钟都变成0。

将有三个按钮与“重置”，“暂停/恢复”和“开始”按钮。

重置将把秒表重置为用户指定的字段。暂停将暂停秒表，如果再次单击，它将继续它。START将在开始时启动秒表。

我发现很难创造出这样一个定时器。请帮帮忙。

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:在“开始-定时器”按钮上调用此方法