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 einer Tabelle von CSS optisch anpassen (width, max-width).

24.12.2018
24.12.2019

Fortschrittsbalken mit JavaScript

<div style="width: 100%; border:1px solid #0070DF;">

<script>
var StartDatum = "December 24, 2018"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!)
var EndDatum  =  "December 24, 2019";

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, 2018);
$EndDatum  =  mktime(0,0,0, 12, 24, 2019);

$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.
Webseiten schneller machen
Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.
Browser-Sprachumschaltung
Diese Sprachumschaltung zeigt je nach der verwendeten Sprache (deutsch, englisch, ...) im Browser unterschiedlichen Inhalt an.
Diese Schlagwörter könnten Sie interessieren:
Lokaler Webserver PHPMailer localStorage Silbentrennung SQLite Key Codes Sicherheit Datenschutz-Hinweis Berechnungen Veranstaltungsliste Blätterfunktion Diashow ASCII Marquee Floodsperre Canvas Zeitansage Zoom-Funktion Zeitfunktionen Dynamische Seiten