<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
var c = ['#AAB5AC', '#000'];
var D = ['11010111', '01000100', '11101011', '11101110', '01111100', '10111110', '10111111', '11000100', '11111111', '11111110'];
B = new Array();
function init()
{ for (i=0; i<12; i++)
{ B[i] = document.createElement('div'); B[i].className = 'digit';
//B[i].appendChild(document.createTextNode(i));
var hObj = document.createElement('div'); hObj.className = 'digitholder';
hObj.appendChild(B[i]);
document.getElementById('display').appendChild(hObj); }
tick();
}
function tick()
{ var now = new Date();
var nows = ''+lz(now.getHours())+lz(now.getMinutes())+lz(now.getSeconds());
//window.status = nows;
for (i=0; i<6; i++)
{ dx = nows.charAt(i);
for (p=0; p<2; p++)
{ with (B[i + p*6].style)
{ borderTopColor = c[D[dx].charAt(0 + p*4)];
borderRightColor = c[D[dx].charAt(1 + p*4)];
borderBottomColor = c[D[dx].charAt(2 + p*4)];
borderLeftColor = c[D[dx].charAt(3 + p*4)];
}
}
}
setTimeout('tick()', 1000); }
function lz(n) { return n < 10 ? '0'+n : n; }
</script>
<style type="text/css">
body{ background-color:#9CA99F;
color:#000;
}
.digitholder{ color:green;
float:left;
margin-left:10px;
width:75px;
height:75px;
}
.digit{ border:15px solid black;
height:100%;
}
#display{
position:relative;
filter:Blur();
width:550px;
height:180px;
}
</style>
</head>
<body onload="init()">
<div style="position:absolute; left:50%; top:50%; margin-top:-100px; margin-left:-250px;">
<div id="display"></div>
</div>
</body>
</html>
