Tutorials

Individuelle Prozentbalken Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Individuelle Prozentbalken


4804 - 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. Smily NR:8

mfg Eugen

Mitglieder-Kommentare


#3 von lucas
cool nutze ich momentan ^^
#2 von ntmb
Gut hast Recht,
hab es nochmal angepasst. Smily NR:8

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. :-)