纯前端js实现的加载进度条

Posted SmallCuteMonkey80%

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯前端js实现的加载进度条相关的知识,希望对你有一定的参考价值。

function preventRepeatedSubmit()
    var width = document.body.scrollWidth;
    var height = document.body.scrollHeight;
    var divBg = document.getElementById("divBg");
    var progressBar = document.getElementById("progressBar");
	if(divBg==null && progressBar==null)
		divBg = document.createElement("div");
		progressBar = document.createElement("div");
    	divBg.id = "divBg";
    	progressBar.id = "progressBar";
    	divBg.innerhtml = ' <div style "position:absolute;background-color:white;filter:alpha(opacity=50,Style=0);opacity:0.5;'
		       +' width:'+width+';heigh=t:'+height+';'
		       +' left:0;top:0;text-align:center;z-index:30;">'
		       + '</div>';
    	progressBar.style.top =  (height-50)/2 + 'px';
    	progressBar.style.left =  (width-150)/2 + 'px';
    	document.body.appendChild(divBg);
    	document.body.appendChild(progressBar);
    else
		divBg.style.display = 'block';
		progressBar.style.top =  (height-50)/2 + 'px';
		progressBar.style.left =  (width-150)/2 + 'px';
		progressBar.style.display = 'block';
	


以上是关于纯前端js实现的加载进度条的主要内容,如果未能解决你的问题,请参考以下文章

Web前沿技术纯 CSS3 打造的10个精美加载进度条动画

前端扇形进度条怎么实现

使用jquery.form.js实现文件上传及进度条前端代码

【前端】进度条样式实现

请问进度条上方带有文字进度、并且跟随进度条移动的进度条该怎么实现?

js 实现进度条功能。