带开始/暂停和重置按钮的倒计时器

我想在 React JS 中创建一个倒计时器，其中包含“开始”、“暂停”和“重置”按钮，以便操作计时器。作为 React 和 JS 的初学者开发人员，我创建了一个状态变量“secondsElapsed”，以便输入计时器的时间（以秒为单位）。

“startTime”函数是每秒开始计时器的倒计时。 “resetTime”函数是将“secondsElapsed”重置为0。 “pauseTime”函数用于暂停定时器。

其他功能是计算时间并将其返回到特定字段。

这里是描述图片

单击“开始按钮”后倒计时开始运行，并且秒数正在减少。问题是分钟和小时字段并没有像应该的那样每分钟和每小时减少。

这是我的codesandbox链接：https://codesandbox.io/s/y3l1ymq6r1 https://codesandbox.io/s/y3l1ymq6r1

这是我的 React Js 代码：

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      secondsElapsed: 122 //time in seconds
    };
  }

  getHours() {
    return ("0" + Math.round(this.state.secondsElapsed / 3600)).slice(-2);
  }

  getMinutes() {
    return ("0" + Math.round((this.state.secondsElapsed % 3600) / 60)).slice(
      -2
    );
  }

  getSeconds() {
    return ("0" + (this.state.secondsElapsed % 60)).slice(-2);
  }

  startTime() {
    var _this = this;
    this.countdown = setInterval(function() {
      _this.setState({ secondsElapsed: _this.state.secondsElapsed - 1 });
    }, 1000);
  }

  resetTime() {
    this.reset = this.setState({
      secondsElapsed: (this.state.secondsElapsed = 0)
    });
  }

  pauseTime() {
    clearInterval(this.countdown);
  }

  render() {
    return (
      <div className="App">
        <h1>
          {this.getHours()}:{this.getMinutes()}:{this.getSeconds()}
        </h1>
        <button onClick={() => this.startTime()}>Start</button>
        <button onClick={() => this.pauseTime()}>Pause</button>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

我会与Math.floor()对于这种情况，您必须向上计数而不是向下计数。

Timer:

_this.setState({ secondsElapsed: _this.state.secondsElapsed + 1 });

分钟：

return ("0" + Math.floor((this.state.secondsElapsed % 3600) / 60)).slice(-2);

营业时间：

return ("0" + Math.floor(this.state.secondsElapsed / 3600)).slice(-2);