超简单的JS进度条

freeline_FLY

于 2012-02-23 21:43:08 发布

阅读量2.7k

点赞数

分类专栏： JS 文章标签： string div javascript border function

本文链接：https://blog.youkuaiyun.com/freeline_FLY/article/details/7288760

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

今天尝试写了一个非常简单的进度条，下面是代码：

<body οnlοad="check()">
<div id="div1" style="border:dashed 1px #F00; width:450px; height:20px; margin:auto auto;"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
	var div1=document.getElementById("div1");
	//设置进度条的样式
	var str=">";
	var string="";
	var s=0;
	function check(){
		//拼接字符串
		string=string+str;
		//控制进度条每次前进多少
		s=s+2;
		//拼接显示进度条
		div1.innerHTML=string+" "+s+"%";
		//当进度为100时停止，然后转向指定页面
		if(s<=100){
		setTimeout("check()",80);
		}else{
			window.location="www.youkuaiyun.com";
			}
	}
</script>