jsFiddle

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

Fx.Log = new Class({
    
    Extends: Fx,
    
    initialize: function(element, options){
        this.parent(options);
        this.element = document.id(element);
    },
    
    set: function(now){
        this.element.set('text', now.round());
        return this;
    }
    
});

var myFx = new Fx.Log('log');



/* demo utility stuff */

$('options').addEvent('submit',function(event){
    event.stop();
    myFx.setOptions(this.toPairs());
    myFx.options.duration = myFx.options.duration.toInt();
    myFx.start($('from').value.toInt(), $('to').value.toInt());
});

Element.implement({
    
    toPairs: function(){
        var json = {};
            this.getElements('input, select, textarea', true).each(function(el){
                if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file') return;
                var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
                    return opt.value;
                }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
                $splat(value).each(function(val){
                if (typeof val != 'undefined') json[el.name] = val;
            });
        });
        return json;
    }
    
});

<h1 id=log>Waiting ...</h1>

<form id=options>
    <p>
        Count from <input id=from type=text value=0> to <input id=to type=text value=100>
    </p>
    <p>
        Transition <select name=transition>
            <option>linear</option>
            <option>pow:in</option>
            <option>pow:out</option>
            <option>pow:in:out</option>
            <option>expo:in</option>
            <option>expo:out</option>
            <option>expo:in:out</option>
            <option>circ:in</option>
            <option>circ:out</option>
            <option>circ:in:out</option>
            <option>sine:in</option>
            <option>sine:out</option>
            <option>sine:in:out</option>
            <option>back:in</option>
            <option>back:out</option>
            <option>back:in:out</option>
            <option>bounce:in</option>
            <option>bounce:out</option>
            <option>bounce:in:out</option>
            <option>elastic:in</option>
            <option selected>elastic:out</option>
            <option>elastic:in:out</option>
            <option>quad:in</option>
            <option>quad:out</option>
            <option>quad:in:out</option>
            <option>cubic:in</option>
            <option>cubic:out</option>
            <option>cubic:in:out</option>
            <option>quart:in</option>
            <option>quart:out</option>
            <option>quart:in:out</option>
            <option>quint:in</option>
            <option>quint:out</option>
            <option>quint:in:out</option>
        </select>
    </p>
    <p>
        Duration: <input type=text name=duration value=3000>
    </p>
    <p>
    <input type=submit value=Count!>
    </p>
</form>

body { font-family: helvetica, arial; }
#log {
    text-align: center;
    padding: 10px;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 -1px 1px #3267b8;
    border: solid 1px #3267b8;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
    
    background-image: -moz-linear-gradient(top, #75a3dc, #3267b8); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #75a3dc),color-stop(1, #3267b8)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#75a3dc', EndColorStr='#3267b8'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#75a3dc', EndColorStr='#3267b8')"; /* IE8 */
}

#options {
    margin-top: 20px;
    padding: 10px;
    background: #f0f0f0;
    border: solid 1px #888;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}