點擊按鈕，出現(xiàn)網(wǎng)頁進度條

2024-09-05 12:18:12

字體：大中小

供稿：網(wǎng)友

Js效果實現(xiàn)：點擊按鈕，出現(xiàn)進度條，單機按鈕后，頁面會出現(xiàn)1個進度條，或者正在載入中。。。持續(xù)5秒時間，在IE下完全正常，不過好像其它瀏覽器下沒效果，唉~~~

<!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>點擊按鈕，出現(xiàn)網(wǎng)頁進度條</title><style type="text/css">body,html{margin:0;padding:20px;font-size:12px;font-family:Arial;font:12px/1 Tahoma, Arial;}.stepOut{height:20px;border:1px solid #000;background:#eee;width:200px;overflow:hidden;display:none;}.stepIn{width:50px;background:#FF0080;border-top:1px solid #FFB5DA;border-bottom:1px solid #fff;overflow:hidden;color:#fff;text-align:center;font:12px/1.6 arial;}</style></head><body><button id="google">button</button><br/><br/><div   id="iwvjtn8m0"   class="stepOut" id="stepOut" >    <div   id="iwvjtn8m0"   class="stepIn" id="stepIn"></div></div></body><script type="text/javascript">//<![CDATA[function LoadBar(outer,iner,time){    $=function (x){return typeof x=="string"?document.getElementById(x):x};    outer=$(outer);    iner=$(iner);    var i,width,This=this,s=(time||2000)/10;    this.run=function (){        clearTimeout(This.t);        outer.style.display='block';        width=outer.offsetWidth;        i=0;        (function (){            iner.style.width=width/s*i++;            iner.innerHTML=Math.ceil(iner.offsetWidth/width*100)+'%';            if(i<s){This.t=setTimeout(arguments.callee,10)                 }else{iner.innerHTML="ok"}        })()               } };var ldh=new LoadBar(stepOut,stepIn,5000);document.getElementById('google').onclick=ldh.run; //]]></script></html>

上一篇：加入收藏夾代碼

下一篇：Js仿微博插入話題功能