Here is the code:
window.onload = function()
{
//draw the clock when the page loads
draw_clock('counter');
}
function draw_clock(id)
{
//create the div that will hold the clock
var clock = document.createElement('div');
clock.id = id;
//you can change the style of the clock ie to position it at a specific place on the page
//i'll put this one approximately in the center of the page, but you can adjust that to fit your needs
clock.style.position = 'absolute';
clock.style.left = '50%';
clock.style.top = '50%';
clock.style.marginLeft = '-50px';
clock.style.marginTop = '-20px';
//set a starting time for the counter.
clock.time = '00:00:00';
//display the time as div's innerHTML, using a function that formats it to look good on the page
clock.innerHTML = get_clock_innerHTML(clock.time);
//append the clock to the page
document.body.appendChild(clock);
//start a timer that will update the counter every second. You cam use other intervals if you need to
setInterval("clock_counter('"+id+"')", 1000);
}
function get_clock_innerHTML(time)
{
//an array that stores the symbols which draw the good old-fashioned digital clock :)
//IMPORTANT: don't change the alignment or anything else on this array, cause this will cause the clock to look uglier, or even not work
var digits = " _ _ _ _ _ _ _ _ "+
"| | | _| _||_||_ |_ | |_||_| . "+
"|_| | |_ _| | _||_| | |_| _| . "+
" ";
//put the symbols inside a <pre> tag to make sure they will be displayed just like they are written in the array.
//you can also change the style settings i've set
var data = "<pre><span style='color: #000; background: #ccc; font-size: 10px;'>";
//loop trough the four 'rows' of the array and display the appropriate symbols
for(r = 0; r < 100; r += 33)
{
for(i = 0; i < time.length; i++)
{
for(c = (time[i])*3 + r , b = 0; b < 3; b++, c++)
{
if(isNaN(c))
c = 10*3+r;
data += digits[c];
}
}
data += "<br />";
}
data += "</span></pre>";
return data;
}
function clock_counter(id)
{
var clock = document.getElementById(id);
//split the time into hours, minutes and seconds
var tmp = clock.time.split(":");
var hours = tmp[0];
var minutes = tmp[1];
var seconds = tmp[2];
//if the seconds and/or minutes are about to pass 59 - increase the minutes/hours and set seconds/minutes back to zero.
if(seconds == 59)
{
if(minutes == 59)
{
hours++;
minutes = '00';
seconds = '00';
}
else
{
minutes++;
seconds = '00';
}
}
else //otherwise just increase the seconds untill they reach 60
seconds++;
//update the var that holds the time
clock.time = ((hours < 10) ? "0"+parseInt(hours) : hours)+
":"+ ((minutes < 10) ? "0"+parseInt(minutes) : minutes) +
":"+ ((seconds < 10) ? "0"+parseInt(seconds) : seconds);
//and update the innerHTML of clock's div
clock.innerHTML = get_clock_innerHTML(clock.time);
}
Make sure your users know how long they've been on the page, they have to eat from time to time, you know ;) You can see a demo here and get the code from here.
1 comment:
What I want to do is display a counter (or clock) that counts dime in decimal units. Tenths of days, hundredths of days, etc. How might I do this?
Post a Comment