Full version: jsB@nk » Misc » Timer Bar
URL: https://www.javascriptbank.com/timer-bar.html
This JavaScript shows a progress bar used as a timer. You set the total time for delay. Then set the bar width, height, and colors in the .js code part and the bar "counts" up the amount of time you specified. Note: the script starts only once the page is fully loaded.
Full version: jsB@nk » Misc » Timer Bar
URL: https://www.javascriptbank.com/timer-bar.html
<style type="text/css">body{padding-left:30px;padding-right:30px;background-color:white;font-size:9pt;font-family:verdana;color:#00436e;}.pre{color:maroon;font-family:courier;font-size:9pt;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// Timer Bar - Version 1.2// Author: Brian Gosselin// RELEASE INFO:// V 1.0 - INTIAL RELEASE// V 1.1 - CHANGED THE action() FUNCTION SO HIDING THE BAR IS SELECTABLE.// V 1.2 - ADDED FUNCTIONALITY TO CONTROL WHEN YOU CLICK THE TIMERBAR.var loadedcolor='darkgray' ; // PROGRESS BAR COLORvar unloadedcolor='lightgrey'; // COLOR OF UNLOADED AREAvar bordercolor='navy'; // COLOR OF THE BORDERvar barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELSvar barwidth=300; // WIDTH OF THE BAR IN PIXELSvar waitTime=10; // 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 ({})// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:// document.location.href="http://redirect_page.html";// JUST CHANGE THE ACTUAL URL OF COURSE :)var action=function(){hidebar();alert(waitTime+' seconds have elapsed.');}// THE FUNCTION BELOW CONTAINS THE ACTION(S) TO TAKE PLACE IF THE USER// CLICKS THE TIMERBAR. THIS CAN BE USED TO CANCEL THE TIMERBAR.// IF YOU WISH NOTHING TO HAPPEN, SIMPLY REMOVE EVERYTHING BETWEEN THE CURLY BRACES.var clickBar=function(){hidebar();alert('Timer cancelled.');}//*****************************************************////********** 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="clickBar()">';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="clickBar()" 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(){loaded++;if(loaded<0)loaded=0;if(loaded>=waitTime*10){clearInterval(Pid);loaded=waitTime*10;setTimeout('action()',100);}resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);}function hidebar(){clearInterval(Pid);if(ns4)PBouter.visibility="hide";else PBouter.style.visibility="hidden";}//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-->