js模拟预加载

来源:互联网 发布:淘宝职业女装 编辑:程序博客网 时间:2024/05/16 06:45
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#loading{ position:absolute; width:300px; height:200px; border:1px solid #000; left:50%; margin-left:-150px; top:30px;}#loading{ text-align:center}p:nth-child(2) {color:#FF0000;}#loading p:nth-child(2){ border:1px solid #000; width:200px; height:20px; overflow:hidden; margin:auto}#loading span{ display:block; width:1px; background:red; height:20px;}#loading p:nth-child(3){ color:red;}</style></head><body><div id="loading"><p>正在加载中.......</p><p><span></span></p><p>1%</p><script type="text/javascript">var bar=2;var line=1;var amount=1;count()function count(){bar+=2amount+=linevar oP=document.getElementById("loading").getElementsByTagName("p")oP[1].getElementsByTagName("span")[0].style.width=bar+"px"oP[2].innerHTML=amount+"%"if(amount<100){setTimeout("count()",100)}else{//window.location="http://www.google.com"}}</script></div>
</body></html>