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:
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>
Gavin's Odd Bits of Code 