纯享版JS进度条控件优化版（数字百分比变化更明显）

最新推荐文章于 2024-05-02 09:34:08 发布

ZH蔚来

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量141

点赞数 4

分类专栏： JS闭包进度条文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_39294511/article/details/136655283

版权

JS闭包同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

进度条

2 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码，和上一篇相同的调用方式

//这里展示了不同的地方
const updateProgress = (newProgress) => {
        if (!isShowing) {
            overlay.style.display = "block";
            isShowing = true;
        }

        const duration = 1000; // 设置动画时间（ms）
        const steps = 100; // 动画的步数
        const stepIncrement = (newProgress - progress) / steps;
        let stepCount = 0;

        const performAnimation = setInterval(() => {
            if (stepCount >= steps) {
                clearInterval(performAnimation);
            } else {
                progress += stepIncrement;
                percentageDisplay.textContent = progress.toFixed(2) + "%";
                progressBar.style.width = `${progress}%`;
                stepCount++;
            }
        }, duration / steps);
    };