barClock:
A stupid clock concept that is impossible to read but looks kind of neat. Size and color are easily customizable
new random clock
height: 6
top: rgb(248,128,113)
bottom: rgb(116,167,161)
step: 27 ms
link to this clock
the code:
//***************barClock*******************
//uses client time to show a bar-chart clock
//self-contained in JS for easy implementation
//into existing sites.
function barclock(width,height,rTop,gTop,bTop,rBottom,gBottom,bBottom,step){ //fucntion that writes the clock to the page
document.write('<style>.bar{overflow:hidden; float:none; display:block; color: rgb(0,0,0); height:'+height/7+'px; margin:0px; margin-top:1px; font-size:'+height/7+'px; font-family:small fonts;}</style>');//style information
document.write('<div style="width:'+width+'; padding-bottom: 1px; padding-left: 1px; border:solid 1px rgb(128,128,128); background: rgb(0,0,0);">');//container div for the clock
var unitArray = ['years','months','days','hours','minutes','seconds','mseconds']; //array with div ID substrs
for (var i=0; i<unitArray.length; i++) { //loop tha makes divs
document.write('<div style="background:rgb('+(rTop-Math.round(i*(rTop-rBottom)/7))+','+(gTop-Math.round(i*(gTop-gBottom)/7))+','+(bTop-Math.round(i*(bTop-bBottom)/7))+');" class="bar" id="'+unitArray[i]+'Bar"></div>');
}
document.write('</div>'); //close container div
tick(step); //start the clock ticking
}
function tick(step) { //ticks the clock one step
var idArray = [document.getElementById('yearsBar'),document.getElementById('monthsBar'),document.getElementById('daysBar'),document.getElementById('hoursBar'),document.getElementById('minutesBar'),document.getElementById('secondsBar'),document.getElementById('msecondsBar')]; //put elemnt IDs into an array for easy manipulation
var today=new Date(); //get the date.
var valArray = [today.getFullYear(),today.getMonth()+1,today.getDate(),today.getHours(),today.getMinutes(),today.getSeconds(),today.getMilliseconds()]; //use javascript objects to get the values for each unit of time
var widthArray = [valArray[0]/3000*100,valArray[1]/12*100,valArray[2]/30*100,valArray[3]/23*100,((valArray[4]+(valArray[5]/59))/60)*100,((valArray[5]+(valArray[6]/999))/60)*100,valArray[6]/999*100] //convert time into bar widths and put into array
for (var i=0; i<idArray.length; i++) { //loop through divs and set the width to above calculated values
idArray[i].style.width=widthArray[i]+'%';
if(i==0){idArray[i].innerHTML=today;}else{idArray[i].innerHTML=valArray[i];} //show the today info on teh top bar and the value on all other bars
}
t=setTimeout("tick("+step+");",step); //tick again in 'step' mS, lower value is smoother but more expensive
}