<!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+=2 amount+=line var 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>
js模拟预加载
最新推荐文章于 2024-09-05 11:49:00 发布