Javascript 带启动/暂停和复位按钮的倒计时计时器

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

“startTime”功能是在每秒钟开始计时器的倒计时。 “resetTime”功能是将“secondsElapsed”重置为0。 “暂停时间”功能是暂停计时器

其他函数用于计算时间并在特定字段中返回

这里是描述图像

点击“开始按钮”后，倒计时功能正常，秒数减少。问题是，分钟和小时字段并没有像每分钟和每小时那样减少

这里是我的代码沙盒链接：

下面是我的代码：

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>
    );
  }
}

从“React”导入React；
导出默认类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
secondsElapsed:122//以秒为单位的时间
};
}
getHours（）{
返回（“0”+数学圆（this.state.secondsElapsed/3600））.slice（-2）；
}
getMinutes（）{
返回（“0”+数学圆（（this.state.secondsElapsed%3600）/60））.slice(
-2
);
}
getSeconds（）{
返回（“0”+（this.state.secondsElapsed%60））.slice（-2）；
}
开始时间（）{
var_this=这个；
this.countdown=setInterval（函数（）{
_this.setState（{secondsElapsed:_this.state.secondsElapsed-1}）；
}, 1000);
}
重置时间（）{
this.reset=this.setState({
secondsElapsed:（this.state.secondsElapsed=0）
});
}
暂停时间（）{
clearInterval（此为倒计时）；
}
render（）{
返回(
{this.getHours（）}:{this.getMinutes（）}:{this.getSeconds（）}
this.startTime（）}>Start
this.pauseTime（）}>Pause
此参数为.resetTime（）}>Reset
);
}
}

我将使用

Math.floor（）

在这种情况下，您必须向上计数，而不是向下计数

计时器：

_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);