»
AnglaisFrançaisVietnamien

Imprimer - Timer Bar - JavaScriptBank.com

Version complète: jsB@nk » Divers » Timer Bar
URL: https://www.javascriptbank.com/timer-bar.html

Timer Bar © JavaScriptBank.comCet JavaScript montre une barre de progression utilisée comme un minuteur. Vous réglez le montant total heure de retard. Ensuite, placer la barre largeur, hauteur, et les couleurs de l'. Js code barre et la partie "compte" le montant de heure vous avez spécifié. Note: le script ne démarre que lorsque la page est complètement chargée.

Version complète: jsB@nk » Divers » Timer Bar
URL: https://www.javascriptbank.com/timer-bar.html



CSS
<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-->


HTML
<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-->