JavaScript进度条控件实现的示例

在我们之前的文章中，我们给大家介绍了JavaScript实现进度条的几种方式、以及JavaScript原生实现进度条的案例，那么我们今天继续给大家介绍JavaScript进度条控件实现的示例！

 首先定义一个p内嵌一个span:

<p id="loadbar">
<span id="bar"  style="width: 10%;">10%</span>
</p>

然后使用css完成进度条的样式：

	p#loadbar{
				width:300px;
				background-color: silver;
				border:1px solid salmon;
				text-align: center;
				border-radius:8px ;
			}
			#bar{
				display: block;
				font-family: arial;
				font-size: 12px;
				background-color: sandybrown;
				text-align: center;
				padding: 5px;
				border-radius:5px ;
				 
			}

最后用js控制进度条显示：

		var i=0; 
			function startbar(){
				var showbar=setInterval("setbar()",1000);
			}
			function setbar(){
				console.log("setbar");
				i+=5;
				if(i>=100)
				{ 
					clearInterval(showbar);
			    }
				document.getElementById("bar").style.width=i+"%";
				document.getElementById("bar").innerHTML=i+"%";
			}
			
			startbar();

效果如下：

总结：

通过对本文的学习相信小伙伴么你对JavaScript进度条控件实现有了一定的了解、希望对你的工作有所帮助！

相关推荐：

JavaScript实现进度条的几种方法介绍

JavaScript实现进度条的原生代码

JS原生上传大文件显示进度条-php上传文件

以上是JavaScript进度条控件实现的示例的详细内容。更多信息请关注PHP中文网其他相关文章！