Balkengrafik Skript
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktuelle magie
aufladen
aussehen
balken
beispiel
bild
boxen
code
datenbank
dialog
http
image
magie
pixel
prozent
prozentsatz
realisieren
suche
text
url
-
Hey,
ich suche ein Balkengraf Skript und zwar: Ich habe eien Spezial fähiugkeit: "Magie" die lädt sich alle 5sec 10Punkte auf lädt das soll ungefähr so aussehen: http://www.fwwiki.de/images/0/07/Phasenenergie.jpg
ich bräuchte jetzt ein skript der die aktuelle Magie aus der DB liest und als Balkengrafik darstellt...
Ich habe ehrlich gesagt keien Ahnung wie ich das realisieren kan das aufladen etc. klappt allea aber halt das ausgeben als Balken net^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
soulworld schrieb:
Hey,
ich suche ein Balkengraf Skript und zwar: Ich habe eien Spezial fähiugkeit: "Magie" die lädt sich alle 5sec 10Punkte auf lädt das soll ungefähr so aussehen: http://www.fwwiki.de/images/0/07/Phasenenergie.jpg
ich bräuchte jetzt ein skript der die aktuelle Magie aus der DB liest und als Balkengrafik darstellt...
Ich habe ehrlich gesagt keien Ahnung wie ich das realisieren kan das aufladen etc. klappt allea aber halt das ausgeben als Balken net^^
Mal eine Gegenfrage: Wie soll sich denn bei deiner Grafik der Text verhalten?
Also, um beim Bild zu bleiben. Wo steht das "/20400" wenn die Phasenenergie 100% (20400/20400) beträgt?
Im Blauen Balken?
Soll der Text also statisch sein oder mit dem Balken in irgend einer weise mitwandern?
Abgesehen davon ist es ja relativ leicht mit css einen Balken beliebiger Größe zu gestalten.
<html> <head> <title>Phasenenergiebalken_test 1</title> </head> <style type="text/css"> div.Phasenenergie_frame {height: 20px ;width: 300px; margin: ; padding: 0; border: #4444AA 1px solid; background-color: #FFCCCC; overflow: hidden;} div.Phasenenergie {height: 20px; width: 195px; background-color: #CCCCFF; margin: ; padding: 0; float:left; overflow: hidden;} </style> <body> <div class="Phasenenergie_frame" style=""> <div class="Phasenenergie" style=""> Phasenenergie 13227 </div> /20400 </div> </body> </html>
Bei dem Beispiel hat der Balken eine Gesamtlänge von 300 px.
Wenn also die Phasenenergie 13227 von möglichen 20400 beträgt, müsste der Balken 194,514 Pixel lang sein.
(300/20400)*13227=194,514=195 Pixel.
Mein css-Beispiel ist allerdings alles andere als Perfekt und nur ein Beispiel zum weiterarbeiten!!
P.s. mit background-image könntest du dann auch so einen Verlauf in die Balken (Wie im Bild) einfügen.
Beitrag zuletzt geändert: 12.2.2010 1:29:02 von simuliertes -
Es gibt sehr viele (JS) UI Libraries, die Statusbalken umsetzen. Ein meiner Ansicht nach gelungenes Beispiel enthält z.B. Ext JS. Dieses Sample zeigt die Umsetzung: http://www.extjs.com/deploy/dev/examples/message-box/msg-box.html (Progress dialog, wait dialog).
-
du kannst auch einen 1 px breiten abschnitt in photoshop erstellen dass du dann im stylesheet als background für den bereits geladenen teil des balken mir x-repeat hernimmst, damit lassen sich noch bessere effekte erzielen, finde ich , zu einbindung.. wenn du das mit php machst kannste dir irgendwie bestimmt den prozentsatz aus der mysql-datenbank auslesen, in ner variable speichern und dann in dem style tag da einfügen mit entsprechender berechnung...
<?php $db = @new MySQLi(zugangsdaten der mysql datenbank denke das sollte bekannt sein:D ); $prozent = $row['Phasenenergie']/$row['Phasenenergiemax'] $progress = 3*$prozent ?> <style type="text/css"> div.Phasenenergie_frame { height: 20px ; width: 300px; margin: ; padding: 0; border: #4444AA 1px solid; background-color: #FFCCCC; overflow: hidden;} div.Phasenenergie { height: 20px; width: <?php echo $progress; ?> px; background-color: #CCCCFF; margin: ; padding: 0; float:left; overflow: hidden;} </style> <body> <div class="Phasenenergie_frame" style=""> <div class="Phasenenergie" style=""> Phasenenergie 13227 </div> /20400 </div> </body> -
So habe alles zusammengeschmissen und genau das hingektriegt was ich haben wollte super danke! :)
-
super .. gibts auch ein demo link ? oder muss man sich da bei dir anmelden? :D
würd mich interessieren wie's aussieht -
Naja ;) Also hier mal ein Screen: http://img202.imageshack.us/img202/9362/magie.pngDie Magie lädt sich alle 5sec um 4 Einheiten auf das wars eigt. und der skript sieht so aus:
<style type="text/css"> div.Phasenenergie_frame {height: 13px ;width: 200px; margin: ; padding: 0; border: #4444AA 1px solid; background-color: #FFCCCC; overflow: hidden;} div.Phasenenergie {height: 13px; width: <?php echo "$angabe"; ?>px; background-color: #CCCCFF; margin: ; padding: 0; float:left; overflow: hidden;} </style> <body> <div class="Phasenenergie_frame" style=""> <div class="Phasenenergie" style=""> <?php if($magie >= "200") { if($magie >= "400") { echo "<small>Magie: 400 /400</small>"; } else { echo "<small>Magie: $magie /400</small>"; } } ?> </div> <?php if($magie < "200") { echo "<small>Magie: $magie /400</small>"; } ?> </div> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
