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. 2023 |
|
24.12. 2024 |
Fortschrittsbalken mit JavaScript
<div style="width: 100%; border:1px solid #0070DF;"> <script> var StartDatum = "December 24, 2023"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2024"; 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, 2023"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!) var EndDatum = "December 24, 2024"; 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, 2023); $EndDatum = mktime(0,0,0, 12, 24, 2024); $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>
33%
Mit Nachkommastellen
<div style="width: 100%; border:1px solid #000000;"> <?php $StartDatum = mktime(0,0,0, 12, 24, 2023); $EndDatum = mktime(0,0,0, 12, 24, 2024); $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>
33.56%
Tipps
- Umstellung von der PHP-Funktion mysql() zu mysqli()
- Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.
- Visual Studio Code - Tipps
- Mit den Tipps können Sie direkt einsteigen und lernen, wie Sie mit Visual Studio Code produktiv sein können.
- Erster Eintrag in eine MySQL-Datenbank mit PHP
- Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
- Audio-Player
- Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Eselsohren Modal-Fenster Silbentrennung Sprachumschaltung Sortierkasten Zufallsfarbe Mausrad Neon Buchstaben Rahmen Zeitbalken Chatroom Counter Berechnungen Textgestaltung Seitenformatierung Backdrop-Filter PHP-Fehlermeldungen Parallax Scrolling-Effekt Audio-Player Dateibrowser Wecker Floodsperre Event-Kalender ToDo-Liste CSRF-Token
Eselsohren Modal-Fenster Silbentrennung Sprachumschaltung Sortierkasten Zufallsfarbe Mausrad Neon Buchstaben Rahmen Zeitbalken Chatroom Counter Berechnungen Textgestaltung Seitenformatierung Backdrop-Filter PHP-Fehlermeldungen Parallax Scrolling-Effekt Audio-Player Dateibrowser Wecker Floodsperre Event-Kalender ToDo-Liste CSRF-Token