telling time the hard way

Take a look at the clock that tells time in a not very friendly way. Here's a link to the clock. A description of the code is below.

You can view the page source to see all of the style and script. It should be pretty easy to reduce the size of the blocks and put this in the corner of a page. It might look like one of those stupid animated gifs from the 90's.

The time is 20:11 in the clock to the right.

Here's the useful code. On the onLoad event for the body, img, etc. execute startClock(). For the demonstration here, we're set to trigger a refresh every two seconds. If you use this you would probably want to set a longer delay. The showTime() function gets the current time and breaks it out into its parts. We'll use these numbers to populate correct number of cells.

function startClock(){
    setInterval('showTime()',2000);
}
function showTime(){
    resetCells();
    var t = new Date();
    var th = (t.getHours() - (t.getHours()%10))/10;
    var h = t.getHours()%10;
    var tm = (t.getMinutes() - (t.getMinutes()%10))/10;
    var m = t.getMinutes()%10;

colorCells(th,h,tm,m);
}

The colorCells() function reserves the cells randomly and populates the reserved cells with randomly selected colors.

function colorCells(th,h,tm,m){
  for(i=0;i<th;i  ){
    do{
        var n = pickANumber(3);
    }while(document.getElementById(tenhours[n]).style.backgroundColor!="gray");
    document.getElementById(tenhours[n]).style.backgroundColor=pickAColor();
  }
  for(i=0;i<h;i  ){
    do{
      var n = pickANumber(9);
    }while(document.getElementById(hours[n]).style.backgroundColor!="gray");
    document.getElementById(hours[n]).style.backgroundColor=pickAColor();
  }
  for(i=0;i<tm;i  ){
    do{
      var n = pickANumber(6);
    }while(document.getElementById(tenminutes[n]).style.backgroundColor!="gray");
    document.getElementById(tenminutes[n]).style.backgroundColor=pickAColor();
  }
  for(i=0;i<m;i  ){
    do{
      var n = pickANumber(9);
    }while(document.getElementById(minutes[n]).style.backgroundColor!="gray");
    document.getElementById(minutes[n]).style.backgroundColor=pickAColor();
  }
}

Here are the pickANumber() and pickAColor() functions. You can probably guess what they do.

function pickANumber(max){
    value = Math.round((100*Math.random()))%max;
    return value;
}


function pickAColor(){
    value = pickANumber(5);
    return colors[value];
}

Finally we have to clean up our mess before the next time display.

function resetCells(){
    for(i=0;i<3;i  ){
        document.getElementById(tenhours[i]).style.backgroundColor = "gray";
    }
    for(i=0;i<9;i  ){
        document.getElementById(hours[i]).style.backgroundColor = "gray";
    }
    for(i=0;i<6;i  ){
        document.getElementById(tenminutes[i]).style.backgroundColor = "gray";
    }
    for(i=0;i<9;i  ){
        document.getElementById(minutes[i]).style.backgroundColor = "gray";
    }
}

0 comments 18 views