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.2017
24.12.2018

Fortschrittsbalken mit JavaScript

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

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

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

$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

Formulardaten über AJAX überprüfen und speichern
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
Eine MySQL-Tabelle über Links sortieren
Tabellen haben oft den Nachteil das diese nicht vom Benutzer sortiert werden können, dabei ist es eigentlich ganz einfach.
Audio-Player
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Diese Schlagwörter könnten Sie interessieren:
Silbentrennung Dynamische Seiten Veranstaltungsliste Rahmen Counter Datenschutz-Hinweis JSON AJAX Hover-Effekt Zeichenkodierung Lokaler Webserver Wecker Mehrfachauswahl PHPMailer Formulare Textgestaltung Diashow MySQL Responsiv Zeitansage