Javascript 反应计时器组件百分比

我在react中制作了一个计时器组件，它在循环进度条中显示剩余时间的百分比。计时器工作正常，但百分比不工作。我试图在线搜索以计算时间百分比，但没有得到一个有效的示例。计时器的代码在这里

import React, { Component } from 'react';

class TimerCSS extends Component {

    constructor(props){
        super(props);

        this.state = {
            hours: 2,
            min: 0,
            secs: 0,
            fin: false,
            percent: 100
        }
    }

    componentDidMount(){
        this.myInterval = setInterval(() => {
            var {hours,min,secs,fin,percent} = this.state;

            if(secs > 0){
                secs--;
            } else {
                secs = 59;
                if(min > 0){
                    min--;
                } else {
                    min = 59;
                    hours--;
                    if(hours < 0){
                        fin = true;
                        hours = min = secs = 0;
                    }
                }
            }

            this.setState(prevState => ({
                hours, min , secs , fin, percent: Math.round(prevState.percent - 0.83)
            }))
        }, 100);
    }

    componentDidUpdate(){

    }


    render() {
        const {hours,min,secs,fin,percent} = this.state;
        console.log(percent);
        if(fin){
            return(
                <div>
                <center>Finished</center>
            </div>
            )
        } else {
        return (

              <div className={`c100 p${percent}`}>
                <span>1:59</span>
                <div className="slice">
                  <div className="bar"></div>
                  <div className="fill"></div>
                </div>
              </div>

        );
        }
    }
}

export default TimerCSS;

import React，{Component}来自'React'；
类TimerCSS扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:2,，
分:0,，
秒：0，
芬恩：错，
百分比：100
}
}
componentDidMount（）{
this.myInterval=setInterval（（）=>{
var{hours，min，secs，fin，percent}=this.state；
如果（秒>0）{
秒--；
}否则{
秒=59；
如果（最小值>0）{
闵--；
}否则{
最小值=59；
小时--；
如果（小时<0）{
fin=真；
小时=分钟=秒=0；
}
}
}
this.setState（prevState=>({
小时、分钟、秒、财务、百分比：数学四舍五入（prevState.percent-0.83）
}))
}, 100);
}
componentDidUpdate（）{
}
render（）{
const{hours，min，secs，fin，percent}=this.state；
控制台日志（百分比）；
国际单项体育联合会（财务）{
返回(
完成了
)
}否则{
返回(
1:59
);
}
}
}
导出默认timercs；

---

循环进度仅基于CSS下载。

您需要以秒（2*60*60）为单位的初始时间（2小时，如果我理解得很清楚的话），因此：

然后，您需要以秒为单位引用当前时间，因此在设置状态之前的间隔内：

var currentTime = (hours * 60 * 60) + (min * 60) + secs;

最后您可以得到百分比，因此：

var percentage = currentTime / this.state.initialTime * 100;

var percentage = currentTime / this.state.initialTime * 100;