Zeitbalken [IE|M|O|G]

von: Werner Zenk

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 angezeigt.

Beispiele:

Die Breite des Fortschrittsbalkens lässt sich mit Hilfe einer Tabelle optisch anpassen.

24.12.2011

24.12.2012

• Fortschrittsbalken mit JavaScript

Quelltext:

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

<script type="text/javascript">
var StartDatum = "December 24, 2011"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!)
var EndDatum  =  "December 24, 2012";

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

Quelltext:

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

<?php
$StartDatum = mktime(0,0,0, 12, 24, 2011);
$EndDatum  =  mktime(0,0,0, 12, 24, 2012);

$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>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Piecho: Die Berechnung der Prozentangabe scheint noch einen Fehler zu haben. Am 8.7.06 z.B. wurde der 4. und gerahmte Zeitbalken mit der Anzeige vom 24.12.05 bis 24.12.06 nur mit 45% angezeigt, obwohl bereits rund 54% der Zeit (197 von 365 Tagen) verstrichen waren. Wo liegt der Fehler? Werner: Sie haben Recht das stimmte nicht. Das Datumsformat war falsch, es muß natürlich als String übergeben werden! Piecho: Danke für die schnelle und gelungene Korrektur. Manuel: Des is ja cool PS: Die ganze seite ist einfach nur: C -- O -- O -- L
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Dynamisches Eingabefeld - mit Auswahlliste

Drehregler mit Mausrad-Unterstützung

Checkboxen mit gleichem Namen überprüfen - Checkbox-Auswahl senden und mit PHP die Auswahl anzeigen

Mit JavaScript Text Umwandeln

Hyperlinks anzeigen - Dieses Script zeigt die Anzahl der Hyperlinks dieser Seite an.

Zwei Frames gleichzeitig ändern (2)

Klick mich -Beim Klicken des Buttons verschiebt er sich jeweils einen halben Zentimeter ...

Mehrere Funktionen mit onLoad starten

JavaScript Archiv: Tools

Zurück je nach Fenster

E-Mail Test - Überprüft ob die E-Mail-Adresse korrekt eingegeben wurde.

Formular-Ziel ändern - Mit diesen Script ist es möglich, das Ziel eines Formulars nach belieben zu ändern. …mehr