Tally Clock – Johannes Neubauer

This blog entry shows, how to create a tally clock for your website. Below there is a nice one showing you the current time with tally packs (0-5):

div#tally2-clock {
text-align: center;
/* border: solid 1px #CCCCDD; */
min-width: 0px;
}
div#tally2-clock ul li {
display: inline-block;
}
div#tally2-clock ul li.clock0 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c0.png”);
width: 32px;
height: 32px;
}
div#tally2-clock ul li.clock1 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c1.png”);
width: 32px;
height: 32px;
}
div#tally2-clock ul li.clock2 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c2.png”);
width: 32px;
height: 32px;
}
div#tally2-clock ul li.clock3 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c3.png”);
width: 32px;
height: 32px;
}
div#tally2-clock ul li.clock4 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c4.png”);
width: 32px;
height: 32px;
}
div#tally2-clock ul li.clock5 {
background-image: url(“http://kingsware.kopv.de/wp-content/uploads/sites/3/2011/08/c5.png”);
width: 32px;
height: 32px;
}

The first row represents the hour of the day from 0 to 23 o’clock. It is divided into three blocks. The first block is empty for 0-9, has one tally for 10-19 and two tallies for 20-23. So it represents the first digit. The second and third pack define the second digit.
The row beneath represents the minutes from 0 to 59 in an hour. Again, the first pack shows the first digit from 0 to 5 and the second and third the last from 0 to 9. Analogously the third row depicts the seconds in a minute.

The following listing shows a code snippet you may copy to your website at any place. This is especially nice for sites like wordpress, where you can insert code at specific points only. This way I added the clock to this site as a ‘text fragment’ widget.

<style>
  /* insert css from below here */
</style>
<script type="text/javascript">
  /* insert JavaScript code from below. */
</script>
<div id="tally-clock">
  <ul>
    <li class="clock0" id="tally-clock-hour1"/>
    <li class="clock0" id="tally-clock-hour2"/>
    <li class="clock0" id="tally-clock-hour3"/>
  </ul>
  <ul>
    <li class="clock0" id="tally-clock-minute1"/>
    <li class="clock0" id="tally-clock-minute2"/>
    <li class="clock0" id="tally-clock-minute3"/>
  </ul>
  <ul>
    <li class="clock0" id="tally-clock-second1"/>
    <li class="clock0" id="tally-clock-second2"/>
    <li class="clock0" id="tally-clock-second3"/>
  </ul>
</div>

The three unordered lists <ul> represent the rows of the clock. Every list entry <li> stands for a pack of tallies. The type of pack (0-5) is defined via css. The css class clock0 shows an empty png (portable network graphic) as a place holder, whilst clock1 presents a block with one tally and so forth. At the beginning all blocks are set to clock0. These values are updated by the JavaScript shown below:

  function setClock(val, idName) {
    var tenthval = ((val - (val % 10)) / 10);
    var tenval = (val % 10);
    var prefix = "tally-clock-";
    document.getElementById(prefix + idName + "1").setAttribute("class", "clock" + tenthval);

    if (tenval < 5) {
      document.getElementById(prefix + idName + "2").setAttribute("class", "clock" + tenval);
      document.getElementById(prefix + idName + "3").setAttribute("class", "clock0");
    }
    else {
      tenval = tenval - 5;
      document.getElementById(prefix + idName + "2").setAttribute("class", "clock5");
      document.getElementById(prefix + idName + "3").setAttribute("class", "clock" + tenval);
    }
  }
  function doTime() {
    var currDate = new Date();
    var hour = currDate.getHours();
    var minute = currDate.getMinutes();
    var second = currDate.getSeconds();

    setClock(hour, 'hour');
    setClock(minute, 'minute');
    setClock(second, 'second');
  }
  function doInterval() {
    setInterval(doTime, 1000);
  }
  window.onload = doInterval;

The last line is responsible for starting the clock. The function doInterval() is passed to window.onload, which is executed after the page has been loaded. There the function doTime() is triggered every second. The rest of the JavaScript-code is responsible for calculating the different values for the packs in the clock, retrieving the corresponding <li>-Element and replacing the css class attribute by the respective value.

Below you can see the stylesheet for the tally clock. The image urls are an example as you might set in a wordpress page with the images uploaded as media documents (for me in august two thousand and eleven):

div#tally-clock ul li {
    display: inline-block;
}
div#tally-clock ul  li.clock0 {
    background-image: url("wp-content/uploads/2011/08/c0.png");
    width: 32px;
    height: 32px;
}
div#tally-clock ul  li.clock1 {
    background-image: url("wp-content/uploads/2011/08/c1.png");
    width: 32px;
    height: 32px;
}
div#tally-clock ul  li.clock2 {
    background-image: url("wp-content/uploads/2011/08/c2.png");
    width: 32px;
    height: 32px;
}
div#tally-clock ul  li.clock3 {
    background-image: url("wp-content/uploads/2011/08/c3.png");
    width: 32px;
    height: 32px;
}
div#tally-clock ul  li.clock4 {
    background-image: url("wp-content/uploads/2011/08/c4.png");
    width: 32px;
    height: 32px;
}
div#tally-clock ul  li.clock5 {
    background-image: url("wp-content/uploads/2011/08/c5.png");
    width: 32px;
    height: 32px;
}

You can download the tally clock archive here: tally-clock
It contains a fully fledged tally-clock, which can be opened locally in a web browser.

Leave a Reply Cancel reply