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

Fortschrittsbalken mit JavaScript

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

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

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, 2020"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!)
var EndDatum  =  "December 24, 2021";

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

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

Mit Nachkommastellen

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

<?php
$StartDatum = mktime(0,0,0, 12, 24, 2020);
$EndDatum  =  mktime(0,0,0, 12, 24, 2021);

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

Tipps

Kontaktformular - E-Mail mit PHPMailer und SMTP versenden
Manchmal möchte man die E-Mail vom Kontaktformular über dem PHPMailer und SMTP versenden. Weil das aber nicht so einfach ist und bestimmte Einstellungen beachtet werden müssen, stelle ich hier beispielhaft ein PHP-Skript vor.
Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Bilder in einer Datenbank-Tabelle speichern und ausgeben
Das Hochladen von Bildern in die Datenbank und die Anzeige mit PHP ist relativ einfach. Mit dem folgenden PHP-Code lädt der Benutzer die Bilder hoch, die dann sicher in die Datenbank-Tabelle gelangen.