JavaScript进度条控件实现的示例

来源：动视网责编：小采时间：2020-11-27 20:11:05

JavaScript进度条控件实现的示例

JavaScript进度条控件实现的示例:在我们之前的文章中，我们给大家介绍了JavaScript实现进度条的几种方式、以及JavaScript原生实现进度条的案例，那么我们今天继续给大家介绍JavaScript进度条控件实现的示例！首先定义一个p内嵌一个span:<p id="loadbar"&

推荐度：

点击下载本文 文档为doc格式

导读JavaScript进度条控件实现的示例:在我们之前的文章中，我们给大家介绍了JavaScript实现进度条的几种方式、以及JavaScript原生实现进度条的案例，那么我们今天继续给大家介绍JavaScript进度条控件实现的示例！首先定义一个p内嵌一个span:<p id="loadbar"&

在我们之前的文章中，我们给大家介绍了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();

效果如下：