Стало чета интересно, накодил вот че:
<!DOCTYPE html>
<html>
<head>
<title>Цифровой дисплей</title>
<style type="text/css">
.digits li{
display: inline-block;
position: relative;
width: 62px;
height: 92px;
background: #000;
}
.digits li span{
position: absolute;
display: block;
background: #f00;
border: 1px solid #900;
opacity: 0.3;
-moz-border-radius: 2px;
}
/* horisontal segments */
.digits li .segment-1,
.digits li .segment-4,
.digits li .segment-7{
height: 2px;
width: 44px;
left: 8px;
}
.digits li .segment-1{
top: 4px;
}
.digits li .segment-4{
top: 84px;
}
.digits li .segment-7{
top: 44px;
}
/* vertical segments */
.digits li .segment-2,
.digits li .segment-3,
.digits li .segment-5,
.digits li .segment-6{
height: 30px;
width: 2px;
}
.digits li .segment-2{
top: 10px;
left: 54px;
}
.digits li .segment-3{
top: 50px;
left: 54px;
}
.digits li .segment-5{
left: 4px;
top: 50px;
}
.digits li .segment-6{
top: 10px;
left: 4px;
}
.d0 .segment-1,
.d0 .segment-2,
.d0 .segment-3,
.d0 .segment-4,
.d0 .segment-5,
.d0 .segment-6{
opacity: 1;
}
.d1 .segment-2,
.d1 .segment-3{
opacity: 1;
}
.d2 .segment-1,
.d2 .segment-2,
.d2 .segment-4,
.d2 .segment-5,
.d2 .segment-7{
opacity: 1;
}
.d3 .segment-1,
.d3 .segment-2,
.d3 .segment-3,
.d3 .segment-4,
.d3 .segment-7{
opacity: 1;
}
.d4 .segment-2,
.d4 .segment-3,
.d4 .segment-6,
.d4 .segment-7{
opacity: 1;
}
.d5 .segment-1,
.d5 .segment-3,
.d5 .segment-4,
.d5 .segment-6,
.d5 .segment-7{
opacity: 1;
}
.d6 .segment-1,
.d6 .segment-3,
.d6 .segment-4,
.d6 .segment-5,
.d6 .segment-6,
.d6 .segment-7{
opacity: 1;
}
.d7 .segment-1,
.d7 .segment-2,
.d7 .segment-3{
opacity: 1;
}
.d8 .segment-1,
.d8 .segment-2,
.d8 .segment-3,
.d8 .segment-4,
.d8 .segment-5,
.d8 .segment-6,
.d8 .segment-7,
.d8 .segment-8{
opacity: 1;
}
.d9 .segment-1,
.d9 .segment-2,
.d9 .segment-3,
.d9 .segment-4,
.d9 .segment-6,
.d9 .segment-7{
opacity: 1;
}
</style>
</head>
<body>
<ul id="display" class="digits">
<li>
<span class="segment-1"></span>
<span class="segment-2"></span>
<span class="segment-3"></span>
<span class="segment-4"></span>
<span class="segment-5"></span>
<span class="segment-6"></span>
<span class="segment-7"></span>
<span class="segment-8"></span>
</li>
<li>
<span class="segment-1"></span>
<span class="segment-2"></span>
<span class="segment-3"></span>
<span class="segment-4"></span>
<span class="segment-5"></span>
<span class="segment-6"></span>
<span class="segment-7"></span>
<span class="segment-8"></span>
</li>
<li>
<span class="segment-1"></span>
<span class="segment-2"></span>
<span class="segment-3"></span>
<span class="segment-4"></span>
<span class="segment-5"></span>
<span class="segment-6"></span>
<span class="segment-7"></span>
<span class="segment-8"></span>
</li>
</ul>
<button onclick="counter.countTo(this.nextSibling.value)">Считать до:</button><input type="text" />
<script type="text/javascript">
// конструктор дисплея
function Display(id)
{
// dom-элементы представляющие собой цифры
this.digits = document.getElementById(id).getElementsByTagName('li');
// разрядность нашего дисплея
this.width = this.digits.length;
// метод для отображения дисплеем нужного числа
this.set = function(number){
number = number.toFixed();
for (var i=number.length; i <this.width; i++){
number = '0' + number;
}
var i = this.width;
while (i--)
{
this.digits[i].className = 'd' + number[i];
}
}
}
// конструктор счетчика
function Counter()
{
this.value = 0;
this.step = 1;
this.interval = 100;
this.countTo = function(to){
clearInterval(this.intHandler);
if (this.value == to) return true;
var self = this;
var multiplier = (to - this.value < 0) ? -1 : 1;
this.intHandler = setInterval(function(){
self.stepBy(multiplier*self.step);
if (to == self.value) clearInterval(self.intHandler);
}, this.interval);
}
this.stepBy = function(by){
this.value += by;
if (this.onStep) {
this.onStep.call(this, this.value);
}
}
}
var display = new Display('display');
display.set(0);
var counter = new Counter;
counter.onStep = function () {
display.set(this.value);
}
</script>
</body>
</html>