点击按钮，出现网页进度条

2020-01-27 13:43:42

字体：大中小

来源：转载

供稿：网友

Js效果实现：点击按钮，出现进度条，单机按钮后，页面会出现1个进度条，或者正在载入中。。。持续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>点击按钮，出现网页进度条</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 class="stepOut" id="stepOut" >    <div 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仿微博插入话题功能

下一篇：加入收藏夹代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注