wtigert/counter.html

## counter.html
<!doctype html>
<meta charset=utf-8>

<style>
.tt { font: 36px/1.3 Helvetica, sans-serif; }
</style>

<span class="tt">1234</span><br/>
<input class="in" type="text"/><br/>
<button class="push">Push Me</button>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    $('.push').click(function() {
        shift_num();
    });

    function shift_num() {
        var old_num = $('.tt').text();
        var new_num = $('.in').val();

        if (old_num == new_num)
            return;

        old_num = old_num.split('');
        new_num = new_num.split('');

        while (old_num.length < new_num.length){
            old_num.unshift(0);
        }
        while (old_num.length > new_num.length) {
            old_num.pop();
        }

        var steps = [];
        while (steps.length < old_num.length) {
            var i = steps.length;
            new_num[i] = parseInt(new_num[i]);
            old_num[i] = parseInt(old_num[i]);
            steps.push(new_num[i] - old_num[i]);
        }

        cycle_num(steps, old_num);
    }

    function cycle_num(step_array, num_array) {
        var done = 0;
        for (var i = 0; i < step_array.length; i++) {
            done = done + parseInt(step_array[i]);
        }
        if (done != 0) {
            for (var i = 0; i < num_array.length; i++) {
                if (step_array[i] < 0) {
                    num_array[i] -= 1;
                    step_array[i] += 1;
                }
                else if (step_array[i] > 0) {
                    num_array[i] += 1;
                    step_array[i] -= 1;
                }
            }
            $('.tt').text(num_array.join('')).css('color','#CCC');
            setTimeout(function() { cycle_num(step_array, num_array) }, 80);
        }
        else
            $('.tt').text(num_array.join('')).css('color','#5abeff');
    }

</script>
	<!doctype html>
	<meta charset=utf-8>

	<style>
	.tt { font: 36px/1.3 Helvetica, sans-serif; }
	</style>

	<span class="tt">1234</span><br/>
	<input class="in" type="text"/><br/>
	<button class="push">Push Me</button>




	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>

	$('.push').click(function() {
	shift_num();
	});

	function shift_num() {
	var old_num = $('.tt').text();
	var new_num = $('.in').val();

	if (old_num == new_num)
	return;

	old_num = old_num.split('');
	new_num = new_num.split('');

	while (old_num.length < new_num.length){
	old_num.unshift(0);
	}
	while (old_num.length > new_num.length) {
	old_num.pop();
	}

	var steps = [];
	while (steps.length < old_num.length) {
	var i = steps.length;
	new_num[i] = parseInt(new_num[i]);
	old_num[i] = parseInt(old_num[i]);
	steps.push(new_num[i] - old_num[i]);
	}

	cycle_num(steps, old_num);
	}

	function cycle_num(step_array, num_array) {
	var done = 0;
	for (var i = 0; i < step_array.length; i++) {
	done = done + parseInt(step_array[i]);
	}
	if (done != 0) {
	for (var i = 0; i < num_array.length; i++) {
	if (step_array[i] < 0) {
	num_array[i] -= 1;
	step_array[i] += 1;
	}
	else if (step_array[i] > 0) {
	num_array[i] += 1;
	step_array[i] -= 1;
	}
	}
	$('.tt').text(num_array.join('')).css('color','#CCC');
	setTimeout(function() { cycle_num(step_array, num_array) }, 80);
	}
	else
	$('.tt').text(num_array.join('')).css('color','#5abeff');
	}

	</script>