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>
10%
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>
10.42%
Tipps
- 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.
- Webseiten schneller machen
- Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.
- Mit dem PHPMailer E-Mails sicher versenden
- Damit E-Mails sicher beim Empfänger ankommen und nicht irgendwo anders landen (Spamordner) oder sogar vom Provider abgelehnt werden nutzt man am besten eine fertige Mailer-Klasse wie den „PHPMailer”.
- 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.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Audiodatei localStorage Dynamische Seiten Formular Generator Countdown-Generator Mehrfachauswahl RegEx Blätterfunktion Quelltext Datenschutz-Hinweis Lokaler Webserver SQLite AES Arithmetische Operatoren Veranstaltungsliste Suchmaschine Zeit-Differenz Favicon Neon Buchstaben Chatroom Zeitfunktionen Responsiv Farbschema Canvas Event-Kalender
Audiodatei localStorage Dynamische Seiten Formular Generator Countdown-Generator Mehrfachauswahl RegEx Blätterfunktion Quelltext Datenschutz-Hinweis Lokaler Webserver SQLite AES Arithmetische Operatoren Veranstaltungsliste Suchmaschine Zeit-Differenz Favicon Neon Buchstaben Chatroom Zeitfunktionen Responsiv Farbschema Canvas Event-Kalender