ccoltman

HTML

<script src="http://cnanney.com/journal/demo/apple-counter-revisited/js/flipcounter.js"></script>
<div id="flip-counter" class="flip-counter"></div>

CSS

.flip-counter ul.cd {
    float:left;
    list-style-type:none;
    margin:0;
    padding:0
}
.flip-counter li {
    background:url(http://cnanney.com/journal/demo/apple-counter-revisited/img/digits.png) 0 0 no-repeat
}
.flip-counter li.t {
    background-position:0 0;
    width:53px;
    height:39px
}
.flip-counter li.b {
    background-position:0 0;
    width:53px;
    height:64px
}
.flip-counter li.s {
    background-position:-53px -1030px;
    width:14px;
    height:103px
}

JavaScript

var value = 1328;
var endVal = 2750;
var inc = 0;
var pace = 600;
var nextCount;

var myCounter = new flipCounter('flip-counter', {
    value: value,
    auto: false
});

function doCount() {
    value = value + inc <= endVal ? value + inc : endVal;
    myCounter.setValue(value);
    nextCount = value != endVal ? setTimeout(doCount, pace) : null;
}

doCount();