[JavaScript] Counter - Balken

steiny · 21. September 2009

Counter - Balken

Hallo RRler,

ich kenne mich ein wenig mit HTML und PHP aus, bin aber doch noch ein ziemlicher Javascript Noob:

Habe folgende Webseitenidee:
Eine Seite über Zahlen und ihr Verhältnis. zB, wie groß der Schuldenberg wächst, wieviele Google Anfragen gestellt werden etc.
Diese Zahlen möchte ich als Balkendiagramme darstellen, die im Hintergrund meiner Webseite mitwachsen. Man kann aber auch einfach die Webseite ausblenden, dann hat man nur die Balken und kann nähere Informationen erhalten:

Habe mal kurz einen Entwurf gemacht (Es ist nicht das Design, nur ne Skizze):

Die Balken hätte ich als <div> mit width=(Anwachsender Wert) gemacht, die Daten aus MySql ausgelesen in Javascript eingefügt und dann per Javascript die Balken anwachsen lassen:
Ich habe nur ein Problem: Javascript ist nicht so leistungsfähig, oder?!!

Ich habe hier mal einen wirklich sehr bescheidenen Codeschnippsel, der aber jetzt schon ruckelt.

HTML:

<html>
<script type="text/javascript">
<!--
 


function start() {
 var i;
 var t;
 var a;
 var id;
 var t;
 var o;
 var w;
 var x;
 var size;
 samml = new Array();
 samml[0] = new Array ("box1","0","10");
 samml[1] = new Array ("box2","23","100");
 samml[2] = new Array ("box3","90","0");
 
 for (var i = 0; i < samml.length; ++i)
 {

 time(samml[i][0],samml[i][1],samml[i][2]);
 };


 
 window.setInterval("start()", 1000);
}

function time(id,t,a) {
 
 size = document.getElementById(id).style.width;
 
 o = parseInt(a)+ parseInt(size); 
 document.getElementById(id).style.width = o;
 document.getElementById(id).innerHTML = o + "Pixel";
 
}
//-->
</script>

Gibt es vlt eine andere Möglichkeit, außer window.setInterval("start()", 1000);
Damit ich es flüssiger rechnen kann?!

LG,
Steiny

Anzeige

onip · 21. September 2009

AW: Counter - Balken

hi, JS ist schon gut.
sieh die mal prototype oder mootools an.
damit lassen sich animationen verwirklichen.
ich kann dir mootools empfehlen, aber nur weil ich mich
darin eingearbeitet habe. viele mögen prototype lieber.

kleines demo:

http://demos.mootools.net/Native

alternativ kannst du die animationen auch in flash machen.

Nützliche Suchen

[JavaScript] Counter - Balken

Videos zum Themenbereich