React中实现5分钟倒计时转换为进度条100%宽度的方法

核心逻辑说明 #

总倒计时时长固定为300秒（5*60），要实现倒计时归0时进度条宽度为100%，直接通过剩余秒数计算进度百分比即可，无需单独存储进度状态：

// 归0时进度100%，随倒计时推进进度条逐渐填满
const progress = ((300 - countDown) / 300) * 100;

如果需要实现剩余时间越多、进度条越宽（归0时宽度为0%），改为如下公式即可：

const progress = (countDown / 300) * 100;

修改后完整代码 #

import * as styles from './Screen.module.scss'
import { useState, useEffect } from 'react'

export default function Screen() {
    const [countDown, setCountDown] = useState(0);
    const [runTimer, setRunTimer] = useState(true);

    useEffect(() => {
        let timerId;
        if (runTimer) {
            setCountDown(60 * 5);
            timerId = setInterval(() => {
                setCountDown((countDown) => countDown - 1);
            }, 1000);
        } else {
            clearInterval(timerId);
        }
        return () => clearInterval(timerId);
    }, [runTimer]);

    useEffect(() => {
        if (countDown < 0 && runTimer) {
            console.log("expired");
            setRunTimer(false);
            setCountDown(0);
        }
    }, [countDown, runTimer]);

    const seconds = String(countDown % 60).padStart(2, 0);
    const minutes = String(Math.floor(countDown / 60)).padStart(2, 0);
    
    // 直接计算进度，无需单独存state
    const progress = ((300 - countDown) / 300) * 100;

    const fill = {
        width: `${progress}%`,
        height: '100%',
        backgroundColor: 'green',
        // 原代码属性名错误，改为transition才能触发宽度过渡动画
        transition: 'width 0.45s ease-in-out'
    }

    return (
        <main className={styles.container}>
           <div className={styles.bar}>
               <div className={styles.bar_value}>{minutes}:{seconds}</div>
               <div style={fill}></div>
           </div>
        </main>
    )
}

关键改动说明 #

• 移除了冗余的prg状态，进度值直接从countDown派生计算，避免多个状态不同步的bug
• 修正了样式属性错误：将transform改为transition，实现宽度变化的平滑过渡效果
• 百分比计算逻辑和需求对齐，倒计时归0时自动达到100%宽度

内容的提问来源于stack exchange，提问作者hegibo2346