Zeitbalken
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Beispiele:
Die Breite des Fortschrittsbalkens lässt sich mit Hilfe
width, max-width
).24.12.2021 |
|
24.12.2022 |
Fortschrittsbalken mit JavaScript
<div style="width: 100%; border:1px solid #0070DF;"> <script> var StartDatum = "December 24, 2021"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2022"; var Anfang = new Date(StartDatum).getTime(); var Prozent = Math.floor(((new Date().getTime() - Anfang) / (new Date(EndDatum).getTime() - Anfang)) * 100); if (Prozent > 100) Prozent = 100; if (Prozent < 1 ) Prozent = 0; document.write("<div style='width: " + Prozent + "%; background: #AAD5FF; text-align: right;'>" + Prozent + "% <\/div>"); </script> </div>
Mit Nachkommastellen
<div style="width: 100%; border:1px solid #000000;"> <script> var StartDatum = "December 24, 2021"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2022"; var Anfang = new Date(StartDatum).getTime(); var Prozent = ((new Date().getTime() - Anfang) / (new Date(EndDatum).getTime() - Anfang)) * 100; Prozent = Prozent.toString(); Prozent = Prozent.substr(0,5); if (Prozent > 100) Prozent = 100; if (Prozent < 1 ) Prozent = 0; document.write("<div style='width: " + Prozent + "%; background: #FFDBFF; text-align: right;'>" + Prozent + "% <\/div>"); </script> </div>
Fortschrittsbalken mit PHP
<div style="width: 100%; border:1px solid #00A800;"> <?php $StartDatum = mktime(0,0,0, 12, 24, 2021); $EndDatum = mktime(0,0,0, 12, 24, 2022); $Prozent = floor(((time() - $StartDatum) / ($EndDatum - $StartDatum)) * 100); if ($Prozent > 100) $Prozent = 100; if ($Prozent < 1 ) $Prozent = 0; echo "<div style='width: " . $Prozent . "%; background: #00DB00; text-align: right;'>" . $Prozent . "% </div>"; ?> </div>
52%
Mit Nachkommastellen
<div style="width: 100%; border:1px solid #000000;"> <?php $StartDatum = mktime(0,0,0, 12, 24, 2021); $EndDatum = mktime(0,0,0, 12, 24, 2022); $Prozent = substr(((time() - $StartDatum) / ($EndDatum - $StartDatum)) * 100, 0,5); if ($Prozent > 100) $Prozent = 100; if ($Prozent < 1 ) $Prozent = 0; echo "<div style='width: " . $Prozent . "%; background: #FFD700; text-align: right;'>" . $Prozent . "% </div>"; ?> </div>
52.88%
Tipps
- SQLite-Datei mit PHP und PDO erstellen
- Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
- 10 Regeln zu Dateinamen
- Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
- Spalten einer Tabelle dynamisch ändern
- Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
- Responsives Design
- Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.