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