纯享JS进度条控件

置顶 ZH蔚来

已于 2024-04-24 13:09:28 修改

阅读量846

点赞数 37

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

于 2024-03-12 15:01:44 首次发布

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

版权

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

2 篇文章 0 订阅

订阅专栏

进度条

2 篇文章 0 订阅

订阅专栏

纯享JS进度条控件

调用示例

const myProgressBar = ProgressBar(false); 参数控制是否初始化对象显示
设置进度
myProgressBar.updateProgress(50);

const ProgressBar = (shouldShowOnInit = true) => {
    const overlay = document.createElement("div");
    const container = document.createElement("div");
    let progress = 0; // 默认进度为0
    const progressBar = document.createElement("div");
    const percentageDisplay = document.createElement("div");
    let isShowing = false;
    //初始化
    const init = () => {
   		//遮罩层
        overlay.style.position = "fixed";
        overlay.style.top = 0;
        overlay.style.left = 0;
        overlay.style.width = "100%";
        overlay.style.height = "100%";
        overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
        overlay.style.zIndex = 1002;
        if (shouldShowOnInit) {
            overlay.style.display = "block";
            isShowing = true;
        } else {
            overlay.style.display = "none"; // 默认隐藏
            isShowing = false;
        }
		//进度条容器
        container.style.position = "absolute";
        container.style.top = "50%";
        container.style.left = "50%";
        container.style.transform = "translate(-50%, -50%)";
        container.style.borderRadius = "10px";
        container.style.width = "80%";
        container.style.backgroundColor = "white";
		//进度条
        progressBar.style.width = `${progress}%`;
        progressBar.style.height = "20px";
        progressBar.style.borderRadius = "10px";
        progressBar.style.backgroundColor = "orange";
        progressBar.style.transition = "width 0.3s ease";
		//数字百分比
        percentageDisplay.style.position = "absolute";
        percentageDisplay.style.top = "50%";
        percentageDisplay.style.left = "50%";
        percentageDisplay.style.transform = "translate(-50%, -50%)";
        percentageDisplay.style.fontSize = "24px";
        percentageDisplay.style.color = "black";
        percentageDisplay.textContent = "0%";

        progressBar.appendChild(percentageDisplay);
        container.appendChild(progressBar);
        overlay.appendChild(container);
        document.body.appendChild(overlay);
    };
	//设置当前百分比
    const updateProgress = (newProgress) => {
        if (!isShowing) {
            overlay.style.display = "block";
            isShowing = true;
        }

        if (newProgress >= 0 && newProgress <= 100) {
            progress = newProgress;
            percentageDisplay.textContent = progress + "%";
            progressBar.style.width = `${progress}%`;
        }
    };
	//展示
    const show = () => {
        overlay.style.display = "block";
        isShowing = true;
    };
	//隐藏
    const hide = () => {
        overlay.style.display = "none";
        isShowing = false;
    };
	//销毁
    const destroy = () => {
        updateProgress(100);
        overlay.parentNode.removeChild(overlay);
    };
	
    init();

    return {
        updateProgress,
        show,
        hide,
        destroy,
    };
};