首页 > 解决方案 > 计时器问题,在 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 毫秒。有谁知道如何解决这个问题?

标签: javascriptreactjs

解决方案


推荐阅读