js自定义进度条

最新推荐文章于 2024-07-19 15:32:49 发布

wateryi

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/liwateryi/article/details/50110497

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 <style type="text/css">
	.div_one{
		border:solid 1px silver;
		width:400px;
		height:16px;
		padding:0px;
	}
	.div_two{
		width:0px;
		height:100%;
		background-color:green;
	}
 </style>

 <script type="text/javascript">
	window.οnlοad=showPro;

	var n1=1;
	var my_time;
	function showPro(){
		var pro=document.getElementById("div_two");
		pro.style.width=n1+"px";
		n1=n1+10;
		my_time=setTimeout("showPro()",100);
		if(n1>=400){
			clearTimeout(my_time);
			document.location.href="http://www.baidu.com";
		}
	}
 </script>
 </head>
 <body>
  <div class="div_one" id="div_one"><div class="div_two" id="div_two"></div></div>
 </body>
</html>