Thursday, August 28, 2008

Javascript digital counter

I tought of something else I can also do with the digital clock script. Using quite the same code as before, I made a counter, which is a very convinient way to tell the users how much they have been on your site. It starts as the page loads, from "00:00:00" and goes up each second. Of course, you can change the starting value if you need to, just edit it in the code.
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:

Anonymous said...

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?