Thursday, August 28, 2008

Javascript digital clock

Do you wanna have a clock on your pages? I bet you do. Well, there are tons of clock scripts out there, but I tried something different here. Instead of using images to represent the clock, I used symbols, just like they do in the old digital clocks. It's a bit nasty algorithm, but it sure works :)
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: