Js特效代码：点击按钮，出现网页进度条

发布时间：2018-10-10 14:39:55 所属栏目：Unix 来源：站长网

导读：Js效果实现：点击按钮，出现进度条，单机按钮后，页面会出现1个进度条，或者正在载入中。。。持续5秒时间，在IE下完全正常，在其他浏览器没有测试，不知道是否正常，有时间的朋友可以试试。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitio

　　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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!