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.2022 |
|
24.12.2023 |
Fortschrittsbalken mit JavaScript
<div style="width: 100%; border:1px solid #0070DF;"> <script> var StartDatum = "December 24, 2022"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2023"; 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, 2022"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2023"; 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, 2022); $EndDatum = mktime(0,0,0, 12, 24, 2023); $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>
43%
Mit Nachkommastellen
<div style="width: 100%; border:1px solid #000000;"> <?php $StartDatum = mktime(0,0,0, 12, 24, 2022); $EndDatum = mktime(0,0,0, 12, 24, 2023); $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>
43.70%
Tipps
- .htaccess - Passwortschutz für Webseiten
- Mit einer
.htaccess
Datei und einer.htpasswd
Passwort-Datei lassen sich bestimmte Verzeichnisse und die darin enthaltenen Dateien vor unerlaubtem Zugriff schützen.
- Diashow
- Die Diashow liest Bilder aus einem Verzeichnis aus (mit PHP), und zeigt diese mit Hilfe von JavaScript an.
- Mit JSON Daten zwischen JavaScript und PHP austauschen
- JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
- Text-Dateien über PHP laden und bearbeiten
- Über PHP lassen sich Text-Dateien in ein Formular laden und bearbeiten. Der geänderte Text wird, nach dem absenden des Formulars, wieder in der Datei gespeichert.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Formular befüllen ToDo-Liste Key Codes Zebra-Tabelle Zeitfunktionen Silbentrennung Metall-Effekt Generator Passwortschutz AJAX Neon Buchstaben Mauszeiger Audio-Player Operatoren Sortierung Countdown-Generator Kalenderwoche JSON Veranstaltungsliste Quelltext PHP-Fehlermeldungen Zoom Funktion Modal-Fenster SQLite Zeitansage Lokaler Webserver
Formular befüllen ToDo-Liste Key Codes Zebra-Tabelle Zeitfunktionen Silbentrennung Metall-Effekt Generator Passwortschutz AJAX Neon Buchstaben Mauszeiger Audio-Player Operatoren Sortierung Countdown-Generator Kalenderwoche JSON Veranstaltungsliste Quelltext PHP-Fehlermeldungen Zoom Funktion Modal-Fenster SQLite Zeitansage Lokaler Webserver