Phiên bản đầy đủ: jsB@nk » Trình duyệt » Hiệu ứng trang » Thanh tiến trình trên trang web
URL: https://www.javascriptbank.com/time-based-progress-bar.html
Hiệu ứng sẽ hiển thị một thanh tiến trình dựa vào thời gian để thông báo cho người truy cập xem quá trình thực hiện một công việc nào đó trên trang web.
Phiên bản đầy đủ: jsB@nk » Trình duyệt » Hiệu ứng trang » Thanh tiến trình trên trang web
URL: https://www.javascriptbank.com/time-based-progress-bar.html
<script language="javascript">// Time-based progress bar- By Brian Gosselin at http://scriptasylum.com/bgaudiodrvar loadedcolor='blue' ; // PROGRESS BAR COLORvar unloadedcolor='lightgrey'; // COLOR OF UNLOADED AREAvar bordercolor='navy'; // COLOR OF THE BORDERvar barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELSvar barwidth=400; // WIDTH OF THE BAR IN PIXELSvar waitTime=5; // NUMBER OF SECONDS FOR PROGRESSBAR// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:// window.location="http://redirect_page.html";// JUST CHANGE THE ACTUAL URL OF COURSE :)var action=function(){alert("Thank you for visiting JavaScriptBank.com");}//*****************************************************////********** DO NOT EDIT BEYOND THIS POINT **********////*****************************************************//var ns4=(document.layers)?true:false;var ie4=(document.all)?true:false;var blocksize=(barwidth-2)/waitTime/10;var loaded=0;var PBouter;var PBdone;var PBbckgnd;var Pid=0;var txt='';if(ns4){txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';txt+='</ilayer>';txt+='</td></tr></table>';}else{txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';txt+='</div>';}document.write(txt);function incrCount(){window.status="Loading...";loaded++;if(loaded<0)loaded=0;if(loaded>=waitTime*10){clearInterval(Pid);loaded=waitTime*10;setTimeout('hidebar()',100);}resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);}function hidebar(){clearInterval(Pid);window.status='';//if(ns4)PBouter.visibility="hide";//else PBouter.style.visibility="hidden";action();}//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COMfunction findlayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;}return null;}function progressBarInit(){PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');resizeEl(PBdone,0,0,barheight-2,0);if(ns4)PBouter.visibility="show";else PBouter.style.visibility="visible";Pid=setInterval('incrCount()',95);}function resizeEl(id,t,r,b,l){if(ns4){id.clip.left=l;id.clip.top=t;id.clip.right=r;id.clip.bottom=b;}else id.style.width=r+'px';}window.onload=progressBarInit;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->