javascript网页加载进度条实现代码

作者：简简单单 2011-12-23

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>进度条动画效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body{margin:0px;padding:0px;}
#ibox{line-background:#ccc;text-align:left;margin:100px auto 0 auto;}
#iLoading{color:#fff;font-size:12px;line-background:red;text-align:center;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
	var idiv=document.getElementById('iLoading');
	var ibox=document.getElementById('ibox');
	var timer=null;
	timer=setInterval(function(){
		var iWidth=idiv.offsetWidth/ibox.offsetWidth*100;
		idiv.style.px';
		idiv.innerHTML=Math.round(iWidth)+"%";
		if(iWidth==100){
			clearInterval(timer);
		}
	},1);
}
</script>
</head>
<body>

<div id="ibox">
  <div id="iLoading"></div>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：兼容性超强颜色渐变效果下一个：javascript中获取浏览器窗口中可视区域

javascript网页加载进度条实现代码

相关文章

精彩推荐