javascript - 计时器问题,在 React 中将毫秒转换为日期格式
问题描述
我正在 React 中完成我的 Timer 项目。这是我的计时器组件的代码:
import React, {Component} from 'react';
class Timer extends Component {
constructor(props){
super(props);
this.state = {
count: 0,
pause: true,
clock: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
}
componentDidMount() {
this.countTimers();
}
countTimers = () => {
let counter = setInterval(() => {
if (!this.state.pause) {
this.setState({
count: this.state.count + 1,
days: Math.floor(this.state.count / (1000 * 60 * 60 * 24)),
hours: Math.floor((this.state.count % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((this.state.count % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((this.state.count % (1000 * 60)) / 1000)
})
console.log(this.state.seconds);
}
}
, 1000);
}
startHandler = () => {
this.setState({
pause: false
})
}
pauseHandler = () => {
this.setState({
pause: true
})
}
render () {
return (
<div>
<p>{'Time spent on this site'}</p>
<span className="days">{this.state.days}:</span>
<span className="hours">{this.state.hours}:</span>
<span className="minutes">{this.state.minutes}:</span>
<span className="seconds">{this.state.seconds} </span>
<button id="start" onClick={this.startHandler}>START</button>
<span>{this.state.count}</span>
<button id="pause" onClick={this.pauseHandler}>PAUSE</button>
</div>
);
}
}
export default Timer;
一切都很好,除了我没有收到我试图从公式中获得的天、小时、分钟和秒值:
days: Math.floor(this.state.count / (1000 * 60 * 60 * 24)),
hours: Math.floor((this.state.count % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((this.state.count % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((this.state.count % (1000 * 60)) / 1000)
需要明确的是,我没有使用 date 对象来获取任何值,只是通过 setInterval 函数来增加秒的值,将间隔设置为 1000 毫秒。有谁知道如何解决这个问题?