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;
}
function setClock2(val, idName) {
var tenthval = ((val – (val % 10)) / 10);
var tenval = (val % 10);
var prefix = “tally2-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 doTime2() {
var currDate = new Date();
var hour = currDate.getHours();
var minute = currDate.getMinutes();
var second = currDate.getSeconds();
setClock2(hour, 'hour');
setClock2(minute, 'minute');
setClock2(second, 'second');
}
function doInterval2() {
setInterval(doTime2, 1000);
}
function oldAndNew(oldfnc, newfnc) {
oldfnc();
newfnc();
}
if(window.onload != null) {
oldf = window.onload;
window.onload = oldAndNew(oldf, doInterval2);
}
else {
window.onload = doInterval2;
}