morphclock: demo

morphclock ist eine animierte Uhr/Datumsanzeige/Logo für Webseiten.

Die Einbindung ist denkbar einfach: Der JavaScript-Code wird mit 


<link rel="stylesheet" type="text/css" href="morph.css">
<script type="text/javascript" language="javascript" src="morphclock.min.js"></script>
nach dem <body>-Tag eingefügt.

morphclock

Die Uhr wird mit 

<div id="id"></div>
<script type="text/javascript">
    var morphclock = new MorphClock(id, [format], [options]);
<script>
eingesetzt und aktiviert.

format ist optional und kann folgende Werte annehmen:

  • hhmm12 für die Anzeige im 12-Stunden-Format ohne Sekunden,
  • hhmm24 für die Anzeige im 24-Stunden-Format ohne Sekunden,
  • hhmmss12 für die Anzeige im 12-Stunden-Format mit Sekunden,
  • hhmmss24 für die Anzeige im 24-Stunden-Format mit Sekunden default.

Die Zeitbasis ist die mitteleuropäische (Sommer-)Zeit.

morphdate

Die Datumsanzeige wird mit 

<div id="id"></div>
<script type="text/javascript">
    var morphclock = new MorphDate(id, [format], [options]);
<script>
eingesetzt und aktiviert.

format kann folgende Werte annehmen:

  • D.M.Y für die Anzeige im Format dd.mm.yyyy default
  • D-M-Y für die Anzeige im Format dd-mm-yyyy
  • D/M/Y für die Anzeige im Format dd/mm/yyyy
  • Y-M-D für die Anzeige im Format yyyy-mm-dd
  • Y/M/D für die Anzeige im Format yyyy/mm/dd
  • Month D,Y für die Anzeige mit abgekürztem Monatsnamen
  • full für die Anzeige mit ausgeschriebenem Wochentag
  • full-de dito mit deutschen Abkürzungen

morphtimer

Die Stoppuhr wird mit 

<div id="id"></div>
<script type="text/javascript">
    var morphtimer = new MorphTimer(id, starttime, [format], [options]);
<script>
eingesetzt und aktiviert.

morphlogo

Das Logo wird mit 

<div id="id"></div>
<script type="text/javascript">
    var morphclock = new MorphLogo(id, [options]);
<script>
eingesetzt und aktiviert. Das zweite 'o' zeigt die aktuelle Uhrzeit an.

Einige Variationen, die per JavaScript gesteuert werden (und natürlich auch auf die Uhr und die Datumsanzeige anwendbar sind):

Farben und Gradienten …

…kombinierbar mit verschiedenen relativen und absoluten Größen: