Individuelle Prozentbalken Tutorial - Kostenlose Homepage Tools für deine Homepage auf ntmb.de

Individuelle Prozentbalken

6173 - ntmb - 06.02.2007 20:51 Uhr - Version: 1 - - verlinken als BB-Code

In diesem Tutorial werde ich euch mal zeigen wie man sich ganz einfach ein Prozentbalken zusammen bauen kann, welches immer individuell per php erstellt werden kann.

Und zwar macht man zwei mal div auf, es müsste so aufgebaut sein:

1. div: absolute Höhe & Breite, Hintergrund, Rahmen werden bestimmt
2. div: links positionierter div, aber mit rechts ausgerichteten Text, wo die Höhe 100% und die Breite je nach Prozensatz festgelegt wird (0%-100%) mit ganzen Prozent werden

So nun kommt der Teil wo wir eine eigene Funktion zum Prozentbalken erstellen, dies dient dazu, dass wir im Verlauf der Scripts nicht mehr so viel programmierten Code in der Datei mehr haben.

1 2 3 4 5 6 7 8 <? function probalken($zaehler,$nenner){ $pro=round(($zaehler/$nenner*100),0); echo '<div style="border:1px solid #000000;padding:1px;background:#FFFFFF;width:200px;height:22px"> <div align="left" style="width:'.$pro.'%;height:100%;color:#000000;background:#dfdfdf;text-align:right">'.$pro.'%</div> </div>'; } ?>

Die Funktion benutzt die beiden Variablen und teil diese durcheinnander ($zaehler/$nenner), anschließend wird die Zahl mit 100 mutlipliziert, damit wir eine Prozentzahl als ganzstellig haben (ohne 0.8212 mit Multiplikation 82.12).
Zusätzlich wird die zahl auf null Kommastellen gerundet (82).

So nun haben wir eine eigene Funktion erstellt, diese Funktion könnt ihr nun immer per

1 2 3 4 <? // Information probalken(zaehler,nenner); probalken(80,120); ?>

im Laufe der ganzen Datei aufrufen, wo ihr die Funktion eingebaut wurde.

Naja ich wünsche euch mit dem Script noch viel Spass.

mfg Eugen

Mitglieder-Kommentare

#3 von lucas

cool nutze ich momentan ^^

#2 von ntmb

Gut hast Recht,
hab es nochmal angepasst.

mfg Eugen

Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen

#1 von rQm

Schön wäre die Funktion noch, wenn man als Optionaler Parameter die gesammtzahl eingeben kann - beispiel:

<?
$balken = new probalken(80, 394);
?>

-> Gesammter Balken is 394px gross
-> er markiert 80% von 394px (also 315px) in ner Farbe, der rest (79px) grau hinterlegt

Ansonsten bringt es doch gar nix daraus eine Funktion zu machen..

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)