Bar Graph Clock
Instructions:
1: Copy and paste the following javascript into the BODY section of your page wherever you want the bargraph clock to appear:
Select all...
<script language="javascript"> var cellwidth=10; // EACH "CELL" WIDTH IN PIXELS var cellheight=10; // EACH "CELL" HEIGHT IN PIXELS var fontsize=11; // FONT SIZE OF THE NUMBERS. SETTING THIS TOO BIG CAUSES UNDESIRED EFFECTS. var fontcolor="black"; // ENTER ANY HTML OR RGB COLOR CODE var fontstyle="bold"; // ENTER EITHER BOLD, ITALICS, NONE var oncolor="#0084d8"; // COLOR OF ACTIVE CELLS var offcolor="#00385c"; // COLOR OF INACTIVE CELLS //************** DO NOT EDIT BEOND THIS POINT *************// var NS4 = (document.layers)? true : false; var IE4 = (document.all && !document.getElementById)? true : false; var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false; var binclk; var now; var t='
'; for(i=0;i<=58;i+=2)t+='
'+i+'
|
'; t+='
H:
'; for(i=0;i<=23;i++)t+=(NS4)? '
' : '
'; t+='
M:
'; for(i=0;i<=59;i++)t+=(NS4)? '
' : '
'; t+='
S:
'; for(i=0;i<=59;i++)t+=(NS4)? '
' : '
'; t+='
'; for(i=1;i<=59;i+=2)t+='
|
'+i+'
'; t+='
'; document.write(t); function getvals(){ now=new Date(); now.s=now.getSeconds(); now.h=now.getHours(); now.m=now.getMinutes(); } function setclock(){ getvals(); if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor('hrs'+i, offcolor); if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor('min'+i, offcolor); if(now.s==0) for(i=1;i<=59;i++)setbgcolor('sec'+i, offcolor); setbgcolor('hrs'+now.h, oncolor); setbgcolor('min'+now.m, oncolor); setbgcolor('sec'+now.s, oncolor); } function setbgcolor(idstr, color){ if(IE4)document.all[idstr].style.backgroundColor=color; else if(NS4)document.layers[idstr].bgColor=color; else document.getElementById(idstr).style.backgroundColor=color; } window.onload=function(){ getvals(); for(i=0;i<=now.h;i++)setbgcolor('hrs'+i, oncolor); for(i=0;i<=now.m;i++)setbgcolor('min'+i, oncolor); for(i=0;i<=now.s;i++)setbgcolor('sec'+i, oncolor); setInterval('setclock()', 100); } window.onresize=function(){ if(NS4)setTimeout('history.go(0)',400); } </script>
2: Adjust the settings at the top of the script to suit your tastes.