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
- 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.
- 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.
- Seiten druckfrisch gestalten
- Mancher Besucher einer Website möchte eine bestimmte Seite ausdrucken, auf dem Papier stören dann Elemente wie Werbung, Navigationsleisten, großflächige Design-Elemente oder andere Elemente. Wie Sie diese vor dem drucken "wegzaubern" erfahren Sie hier.
Diese Schlagwörter könnten Sie interessieren:
Canvas Sitemaps-Protokoll Passwortschutz Chatroom Zeitfunktionen Wasserzeichen Berechnungen Inhaltsverzeichnis Linkliste Responsiv Suchmaschine Dynamische Seiten Authentifizierung Webseitenschutz Metaphone Zeitbalken SQLite Mnemonisches Passwort Hover-Effekt Zufallsfarbe Favicon Lokaler Webserver Zeichnen Sprachumschaltung Veranstaltungsliste
Canvas Sitemaps-Protokoll Passwortschutz Chatroom Zeitfunktionen Wasserzeichen Berechnungen Inhaltsverzeichnis Linkliste Responsiv Suchmaschine Dynamische Seiten Authentifizierung Webseitenschutz Metaphone Zeitbalken SQLite Mnemonisches Passwort Hover-Effekt Zufallsfarbe Favicon Lokaler Webserver Zeichnen Sprachumschaltung Veranstaltungsliste