用javascript实现进度条

最新推荐文章于 2024-05-02 09:34:08 发布

sunyujia

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量8.1k

点赞数

分类专栏： Javascript 文章标签： javascript function button null div border

本文链接：https://blog.youkuaiyun.com/sunyujia/article/details/2533980

版权

Javascript 专栏收录该内容

15 篇文章

订阅专栏

首选要感谢csdn,因为这套代码是在csdn资源下载页面的那个进度条的基础上修改的,进度条的样式可通过css定义,div对象的创建使用innerHTML, 因为document.createElement("div");会带来内存泄露的问题,虽然这个进度条只占有几k的内存,但是还是把它做的完美些比较好,下面代码中init()方法是必要的,需要在页面初始化的时候初始进度条对象,即window.jtProBar = new syj.ProgressBar.....有了jtProBar 以后就可以通过jtProBar.setPercent来控制进度条的进度条了,例如jtProBar.setPercent(3/100);进度条的状态就为3%, 这个地方只要是小于1的分数即可,例如jtProBar.setPercent(3/278);会按百分比计算显示适当的比例. 下面的代码示例中用到了很多window.xxx 其实这个相当于在script中定义全局变量 var xxx= 效果是一样的.

<html>

	<head>

		<title>进度条</title>

		<!-- 

				简单的javascript进度条

				作者:孙钰佳

				邮箱:sunyujia@yahoo.cn 

				blog:http://blog.youkuaiyun.com/sunyujia/

				转载请保留此段注释

		-->

    	<style type="text/css">

	    	.bgBar{

				background: #FFFFFF;

				font-family: Arial,Verdana;

				border: 1px solid #000000;

				text-align: left;

				font-size: 17;

				font-weight: bold;

			}

	    	.bgBar div{

				background: #DAECC8;

				border: 1px solid #FFFFFF;

				color:  #308040;

				text-align: right;

				overflow: hidden;

			}

		</style>

		<script type="text/javascript">

			/****************************************************************************************/

			//下面代码为进度条的封装

			if (syj == null) var syj = {};

			//进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条

			syj.ProgressBar=function(parent, width , barClass, display) {

				this.parent=parent;

				this.pixels = width;

				this.parent.innerHTML="<div/>";

				this.outerDIV = this.parent.childNodes[0];

				this.outerDIV.innerHTML="<div/>";

				this.fillDIV = this.outerDIV.childNodes[0];

				this.fillDIV.innerHTML = "0";

				this.fillDIV.style.width = "0px";

				this.outerDIV.className = barClass;

				this.outerDIV.style.width = (width + 2) + "px";

				this.parent.style.display = display==false?'none':'';

			}

			//更新进度条进度 pct的值要介于0和1之间

			syj.ProgressBar.prototype.setPercent = function(pct) {

				var fillPixels;

				if (pct < 1.0){

					fillPixels = Math.round(this.pixels * pct);

				}else {

					pct = 1.0;

				  	fillPixels = this.pixels;

				}

				this.fillDIV.innerHTML = Math.round(100 * pct) + "%";

				this.fillDIV.style.width = fillPixels + "px";

			}

			//控制进度条的 显示/隐藏

			syj.ProgressBar.prototype.display= function(v){

				this.parent.style.display = v==true?'':'none';

			}

			//初始化进度条

			function init(){

				window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 450 , "bgBar");

			}

			/****************************************************************************************/

			//下面代码为演示程序

			//开始演示

			function startAutoDemo(){

				if(window.thread==null)

					window.thread=window.setInterval("updatePercent()",60);

			}

			//停止演示

			function stopAutoDemo(){

				window.clearInterval(window.thread);

				window.thread=null;

			}

			//演示程序

			function updatePercent(){

				if(window.count==null)window.count=0;

				window.count=count%100

				jtProBar.setPercent(window.count/100);

				window.count++;

			}

			/****************************************************************************************/

		</script>

	</head>

	<body οnlοad="init()">

		<input type="button" value="100%效果" οnclick="window.stop=false;jtProBar.setPercent(1);"/>

		<input type="button" value="开始自动演示" οnclick="startAutoDemo()"/>

		<input type="button" value="停止自动演示" οnclick="stopAutoDemo()"/>

		<input type="button" value="显示" οnclick="jtProBar.display(true)"/>

		<input type="button" value="隐藏" οnclick="jtProBar.display(false)"/>

		<!-- 进度条的父控件 -->

		<div id="progressBar"></div>

	</body>

</html>