欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript进度条控件实现的示例

程序员文章站 2024-01-13 21:13:28
...
在我们之前的文章中,我们给大家介绍了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实现进度条的几种方法介绍


JavaScript实现进度条的原生代码


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

以上就是JavaScript进度条控件实现的示例的详细内容,更多请关注其它相关文章!