Gavin’s Odd Bits of Code

2008-04-07 (Mon)

CSS/JavaScript Animated Odometer

Filed under: Web — Gavin Brock @ 10:14 pm
Tags: , ,

As part of the Street View saver page, I thought it would be fun to see how far you have “driven“. So I set about finding an odometer. This proved harder than I expected since most of what was out there were static, image based web-counters.

So I set about some CSS hacking and came up with this:
Odometer screen shot

This is entirely CSS and Javascipt based and fairly browser neutral (only fairly common one missing is IE 6 – bleagh).

Full details, including API, here.

Zip download here.

Update: 2009/04/07

Two odometers should work too:

<script src=”odometer.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
var n = 9999999998;
var m = 10;
var myOdometer1, myOdometer2;
function run () {
var div1 = document.getElementById(“odometerDiv1”);
var div2 = document.getElementById(“odometerDiv2”);
myOdometer1 = new Odometer(div1, {value: n, digits: 10, tenths: true});
myOdometer2 = new Odometer(div1, {value: m, digits: 10, tenths: true});
update1();
update2();
}

function update1 () {
n=n+0.0025
myOdometer1.set(n);
setTimeout(“update1()”, 50);
}
function update2 () {
m=m-0.001
myOdometer2.set(m);
setTimeout(“update2()”, 100);
}
//]]>
</script>

<body onload=”run()” >
<div id=”odometerDiv1″ style=”width:100%;”></div>
<hr>
<div id=”odometerDiv2″ style=”width:100%;”></div>

Create a free website or blog at WordPress.com.