De odo-meter procedure is weer eens helemaal gemoderniseerd. Sinds de laatste keer is de JSLint-check flink "verzwaard", en de code valideerde niet meer. Dat doet het nu weer absoluut wel! Deze stokoude code is weer geheel foutloos en wordt door alle moderne browsers probleemloos uitgevoerd. De odometer is echt één van de parade-paardjes en wordt op tientallen sites getoond...
De procedure is verder eenvoudig te implementeren. Verander bij de variabele decimaal_tonen_rechts de false in een true, en er is een decimale bar aan de rechterkant bijgekomen. Plaats de onderstaande html-code en javascript in de body-sectie van jouw pagina, en zorg er voor dat het javascript zo laag als mogelijk op de pagina geplaatst wordt.
Op de kompoos.nl hebben we nog een voorbeeld (een real-time bezoekers-teller) waar de odo-meter een nuttige functie gekregen heeft.
<div id="container_van_odometer"></div>
<div style="clear:both;"></div>
<script>
/*global document: false */
/*global setTimeout: false */
/*global window: false */
var start_bij_nummer = 773,
snelheid = 0.025,
decimaal_tonen_rechts = false,
het_aantal_bars = 5,
odometer_array = [],
i;
function odometer(huidige_div, extra_opties) {
var key;
this.cijfers = 6;
this.achter_de_komma = 0;
this.pixels_cijfers_hoogte = 24;
this.padding_cijfers = 0;
this.pixels_cijfers_breedte = 24;
this.bewuste_afwijking_hoogte = 2;
this.fontStyle = "font-family:monospace;font-weight: bold;";
this.value = -1;
for (key in extra_opties) {
if (extra_opties.hasOwnProperty(key)) {
this[key] = extra_opties[key];
}
}
var style = {
cijfers: "position:absolute; height:" + this.pixels_cijfers_hoogte + "px; width:" + (this.pixels_cijfers_breedte - (2 * this.padding_cijfers)) + "px; " + "padding:" + this.padding_cijfers + "px; font-size:" + (this.pixels_cijfers_hoogte - (2 * this.padding_cijfers)) + "px; " + "background:black; color:white; text-align:center; " + this.fontStyle,
dekolommen: "position:relative; float:left; overflow:hidden;" + "height:" + this.pixels_cijfers_hoogte + "px; width:" + this.pixels_cijfers_breedte + "px;",
lichter: "position:absolute; background:#fff; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
donkerder: "position:absolute; background:#010; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
zijlicht: "position:absolute; background:#fff; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;",
zijdonk: "position:absolute; background:#010; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;"
};
var de_highlights = ["top:20%; height:32%;" + style.lichter, "top:27.5%; height:16%;" + style.lichter, "top:32.5%; height:6%;" + style.lichter, "right:0%; width:6%;" + style.zijdonk, "left:0%; width:4%;" + style.zijlicht, "top:0%; height:14%;" + style.donkerder, "bottom:0%; height:25%;" + style.donkerder, "bottom:0%; height:8%;" + style.donkerder];
this.zdwaarde = function (digit, waarde, partje) {
var cijfer_array = odometer_array[digit];
var px = Math.floor(this.pixels_cijfers_hoogte * partje);
px = px + cijfer_array.offset;
if (waarde !== cijfer_array.de_laatste_waarde) {
var tmp = cijfer_array.cijfer_reeks_a;
cijfer_array.cijfer_reeks_a = cijfer_array.cijfer_reeks_b;
cijfer_array.cijfer_reeks_b = tmp;
cijfer_array.cijfer_reeks_a.innerHTML = waarde;
cijfer_array.cijfer_reeks_b.innerHTML = (1 + Number(waarde)) % 10;
cijfer_array.de_laatste_waarde = waarde;
}
if (px !== cijfer_array.last_px) {
cijfer_array.cijfer_reeks_a.style.top = (px - (2 * px)) + "px";
cijfer_array.cijfer_reeks_b.style.top = ((px - (2 * px)) + this.pixels_cijfers_hoogte) + "px";
cijfer_array.last_px = px;
}
};
this.set = function (inVal) {
if (inVal < 0) {
throw "alleen positieve getallen";
}
this.value = inVal;
if (this.achter_de_komma) {
inVal = inVal * 10;
}
var nummertje = Math.floor(inVal);
var partje = inVal - nummertje;
nummertje = String(nummertje);
for (i = 0; i < this.cijfers; i++) {
var num = nummertje.substring(nummertje.length - i - 1, nummertje.length - i) || 0;
this.zdwaarde(this.cijfers - i - 1, num, partje);
if (num < 9) {
partje = 0;
}
}
};
this.get = function () {
return (this.value);
};
var container_van_odometer = document.createElement("div");
container_van_odometer.setAttribute("id", "odometer");
container_van_odometer.style.cssText = "text-align: left";
huidige_div.appendChild(container_van_odometer);
odometer_array = [];
for (i = 0; i < this.cijfers; i++) {
var cijfer_div_a = document.createElement("div");
cijfer_div_a.setAttribute("id", "odometercijfer" + i + "a");
cijfer_div_a.style.cssText = style.cijfers;
var cijfer_div_b = document.createElement("div");
var j;
cijfer_div_b.setAttribute("id", "odometercijfer" + i + "b");
cijfer_div_b.style.cssText = style.cijfers;
var div_cijfer_kolom = document.createElement("div");
div_cijfer_kolom.style.cssText = style.dekolommen;
div_cijfer_kolom.appendChild(cijfer_div_b);
div_cijfer_kolom.appendChild(cijfer_div_a);
for (j in de_highlights) {
if (de_highlights.hasOwnProperty(j)) {
var hdiv = document.createElement("div");
hdiv.innerHTML = "<p></p>";
hdiv.style.cssText = de_highlights[j];
div_cijfer_kolom.appendChild(hdiv);
}
}
container_van_odometer.appendChild(div_cijfer_kolom);
var offset = Math.floor(Math.random() * this.bewuste_afwijking_hoogte);
odometer_array.push({
cijfer_reeks_a: cijfer_div_a,
cijfer_reeks_b: cijfer_div_b,
de_laatste_waarde: -1,
last_px: -1,
offset: offset
});
}
if (this.achter_de_komma) {
odometer_array[this.cijfers - 1].cijfer_reeks_a.style.background = "#ffffff";
odometer_array[this.cijfers - 1].cijfer_reeks_b.style.background = "#ffffff";
odometer_array[this.cijfers - 1].cijfer_reeks_a.style.color = "#000000";
odometer_array[this.cijfers - 1].cijfer_reeks_b.style.color = "#000000";
}
if (this.value >= 0) {
this.set(this.value);
}
}
var deze_odometer;
function laat_cijfers_draaien() {
start_bij_nummer = start_bij_nummer + snelheid;
deze_odometer.set(start_bij_nummer);
setTimeout(function () {
laat_cijfers_draaien();
}, 0);
}
function odometer_laten_draaien() {
var div = document.getElementById("container_van_odometer");
deze_odometer = new odometer(div, {
value: start_bij_nummer,
cijfers: het_aantal_bars,
achter_de_komma: decimaal_tonen_rechts
});
laat_cijfers_draaien();
}
window.onload = odometer_laten_draaien;
</script>