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.2020 |
|
24.12.2021 |
Fortschrittsbalken mit JavaScript
<div style="width: 100%; border:1px solid #0070DF;"> <script> var StartDatum = "December 24, 2020"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2021"; 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>
Fortschrittsbalken mit PHP
<div style="width: 100%; border:1px solid #0070DF;"> <?php $StartDatum = mktime(0,0,0, 12, 24, 2020); $EndDatum = mktime(0,0,0, 12, 24, 2021); $Prozent = floor(((time() - $StartDatum) / ($EndDatum - $StartDatum)) * 100); if ($Prozent > 100) $Prozent = 100; if ($Prozent < 1 ) $Prozent = 0; echo "<div style='width: " . $Prozent . "%; background: #AAD5FF; text-align: right;'>" . $Prozent . "% </div>"; ?> </div>
Tipps
- Zeitansage in JavaScript
- Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.
- Artikel über Checkboxen auswählen
- Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.
- Mit PHP zeichnen - Eine Grafik mit PHP erstellen
- Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
Diese Schlagwörter könnten Sie interessieren:
ToDo-Liste Key Codes Farbschema Hover-Effekt Wasserzeichen Animation AES Lokaler Webserver Blätterfunktion Eselsohren Metaphone Audiodatei Fotoalbum Mauszeiger Kalenderwoche Kommentar-Box Canvas Quelltext Chatroom RegEx Gästebuch Blend-Mode Berechnungen Stoppwortliste Zebra-Tabelle
ToDo-Liste Key Codes Farbschema Hover-Effekt Wasserzeichen Animation AES Lokaler Webserver Blätterfunktion Eselsohren Metaphone Audiodatei Fotoalbum Mauszeiger Kalenderwoche Kommentar-Box Canvas Quelltext Chatroom RegEx Gästebuch Blend-Mode Berechnungen Stoppwortliste Zebra-Tabelle