Here is what I did:
window.onload = function()
{
//draw the clock when the page loads
draw_clock('current_time', 1);
}
function get_current_time()
{
//create a new date object and get current hours, minutes and seconds
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
//add a leading 0 (zero) to those which are one digit
if(h < 10)
h = "0" + h;
if(m < 10)
m = "0" + m;
if(s < 10)
s = "0" + s;
return h+":"+m+":"+s;
}
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';
//get the current time and set it as div's innerHTML, using a function that formats it to look good on the page
clock.innerHTML = get_clock_innerHTML(get_current_time());
//add the element to the page
document.body.appendChild(clock);
//set the timer which will update the clock. The interval can also be set to more that a second.
//If you need to update the time in another interval of time, say 15 seconds, you can use 15000 as the second argument to setInterval()
setInterval("clock_current_time('"+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_current_time(id)
{
//get the new time and change the innerHTML of the clock
document.getElementById(id).innerHTML = get_clock_innerHTML(get_current_time());
}
Now you know what time it is* :) You can see a preview here and download the code from here.
*Does anyone know what "it" means in the sentence "What time is it?" :)
No comments:
Post a Comment