E-Book Startseite Karteikarten-Programm
0

Bauanleitung

Als erstes schauen wir uns den Head-Bereich der index.html-Datei an. Wichtig ist der CSS- und JavaScript-Link. In der CSS-Datei sind die Style-Informationen ausgelagert und die JavaScript-Datei ist für die Zeigerbewegungen zuständig.

<head>
  <title>Analoguhr - Projekte</title>
  <meta name="author" content="Benjamin Jung" />
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="script.js"></script>
</head>

Im Body-Bereich haben wir das Haupt-DIV-Element "clock". Untergeordnet sind die Zeiger, die ebenfalls ein DIV-Bereich sind, und den Namen "hour", "minute" und "second" haben. Um unsere Uhr ein wenig schöner zu gestallten benötigen wir noch die DIV-Element mit der Identifikation "image" und "point". Des Weiteren brauchen wir noch 4 SPAN-Elemente, die mit der Klassifizierung "number" verbunden sind, und die Uhren-Zahlen 3, 6, 9 und 12 anzeigen. Im onload-Attribut des Body-Bereichs (Ausführung nach erfolgreichem Laden der Seite) notieren wir unsere JavaScript-Funktion, die wir später genauer erklären.

<body onload="GetAndSetTime()">
  <div id="clock">
    <!-- Zeiger -->
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
    <!-- Verzierung -->
    <div id="image"></div>
    <div id="point"></div>
    <span style="top: 0px; left: 138px;" class="number">12</span>
    <span style="top: 138px; left: 276px;" class="number">3</span>
    <span style="top: 276px; left: 138px;" class="number">6</span>
    <span style="top: 138px; left: 0px;" class="number">9</span>
  </div>
</body>

Nun wollen wir unserer Uhr ein wenig Style hinzufügen. Unser Hauptelement ist 300px auf 300px groß und wird so stark abgerundet, dass er einen Kreis bildet (was bei einer Uhr üblich ist). Innerhalb des Clock-Elements positionieren wir Elemente absolut. Deshalb müssen wir hier die Eigenschaft position mit dem Wert relativ setzen. Die Zeiger werden absolut ausgerichtet, weshalb wir den Wert "absolute" in der position-Eigenschaft setzen. Des Weiteren werden noch einige Größenangaben festgelegt. Wichtig ist ebenfalls noch der Ausrichtungspunkt, dieser wird in die Mitte auf der unteren Kante gesetzt (50%: Mitte - 100%: Unten).

/* Hauptelement */
#clock
{
    width: 300px;
    height: 300px;
    -webkit-border-top-left-radius: 150px;
    -moz-border-top-left-radius: 150px;
    -ms-border-top-left-radius: 150px;
    -o-border-top-left-radius: 150px;
    border-top-left-radius: 150px;
    -webkit-border-top-right-radius: 150px;
    -moz-border-top-right-radius: 150px;
    -ms-border-top-right-radius: 150px;
    -o-border-top-right-radius: 150px;
    border-top-right-radius: 150px;
    -webkit-border-bottom-left-radius: 150px;
    -ms-border-bottom-left-radius: 150px;
    -moz-border-bottom-left-radius: 150px;
    -o-border-bottom-left-radius: 150px;
    border-bottom-left-radius: 150px;
    -webkit-border-bottom-right-radius: 150px;
    -ms-border-bottom-right-radius: 150px;
    -moz-border-bottom-right-radius: 150px;
    -o-border-bottom-right-radius: 150px;
    border-bottom-right-radius: 150px;
    background-color: lime;
    position: relative;
}
 
 
/* Zeiger */
#hour
{
    width: 6px;
    height: 110px;
    top: 40px;
    left: 147px;
}
 
#minute
{
    width: 4px;
    height: 140px;
    top: 10px;
    left: 148px;
}
 
#second
{
    width: 2px;
    height: 140px;
    top: 10px;
    left: 149px;
}
 
#hour, #minute, #second
{
    position: absolute;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background-color: blue;
}

Es geht weiter mit dem 2. Teil der CSS-Datei. Hier wollen wir unserer Uhr noch ein paar Dekorationen hinzufügen. Zum einen platzieren wir unser Logo als Hintergrundbild in einem extra DIV-Element. Nun benötigen wir noch eine Mittelpunkt (Kreis!) für die Zeiger. Dieser wird mit dem DIV-Element "point" gekennzeichnet. Für das Ziffernblatt der Uhr, haben wir die 4 Zahlen "3", "6", "9" und "12". Hier verwenden wir eine Inline-Element (span), da wir sonst die Eigenschaft vertical-align nicht setzen können. Für die allgemeinenen Einstellungen nutzen wir die Klassifizierung number. Die genaue Position wurde direkt im style-Attribut des SPAN-Elements festgelegt.

/* Verzierung */
#image
{
    width: 300px;
    height: 300px;
    background: url("image.png") no-repeat;
}
 
#point
{
    width: 12px;
    height: 12px;
    position: absolute;
    top: 144px;
    left: 144px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    -ms-border-top-left-radius: 6px;
    -o-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    -ms-border-top-right-radius: 6px;
    -o-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -ms-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -o-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -ms-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -o-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: red;
}
 
.number
{
    position: absolute;
    font-family: Times;
    font-size: 20px;
    font-weight: bold;
    color: blue;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
}

Nun ermitteln wir mit Hilfe von JavaScript die aktuelle Uhrzeit. Dazu nutzen wir das Date-Objekt. Über die Objekt-Funktion getHours(), getMinutes() und getSeconds() können wir die aktuielle Stunde, Minute und Sekunde auslösen. getHours() liefert die Stunden im 24 Stunden-Format, weshalb wir bei Werten zwischen 12 und 23 die Zahl 12 abziehen. Über Berechnungen berechnen wir den Winkel der einzelnen Zeiger. Die Rotation des Stundenzeigers unterliegt zuästzlich dem Einfluss von den Minuten. Ebenfalls unterliegt der Minutenzeiger unter dem Einflus der Sekunden. Beim Zoom-Vorgang des Beispiels, wird dies deutlich, wie sich der Minutenzeiger mit dem Einfluss der Sekunden leicht bewegt.

// Daten ermitteln und umrechnen
var date = new Date();
var hourHelp = date.getHours() >= 12 ? date.getHours() - 12 : date.getHours();
var hourRotate = ((hourHelp * 30) + (date.getMinutes() / 2)) + "deg";
var minuteRotate = ((date.getMinutes() * 6) + (date.getSeconds() / 10)) + "deg";
var secondRotate = (date.getSeconds() * 6) + "deg";

In unserem 2. Teil der JavaScript-Datei müssen wir die Werte hourRotate, minuteRotate und secondRotate den einzelnen Zeigern zuweisen. Da die Eigenschaft transform nicht von jedem Browser unterstützt werden, verwenden wir zusätzlich die Zusätze für die verschiedenen Browser. Wichtig ist zu wissen, dass bspw. nicht -ms-transform geschrieben werden darf, sondern einfach msTransform. Für die Zuweißung nutzen wir die Funktion getElementById(). Hier tragen wir die ID der verschiedenen Zeiger ein, welche wir schon für die CSS-Formatierung gesetzt haben. Eine Aktuallisierung der Uhr wird im Sekundentakt vorgenommen, wozu uns die Funktion setTimeout() behilflich ist.

// Anwenden
document.getElementById("hour").style.msTransform = "rotate(" + hourRotate +")";
document.getElementById("hour").style.mozTransform = "rotate(" + hourRotate +")";
document.getElementById("hour").style.oTransform = "rotate(" + hourRotate +")";
document.getElementById("hour").style.webkitTransform = "rotate(" + hourRotate +")";
document.getElementById("hour").style.transform = "rotate(" + hourRotate +")";
document.getElementById("minute").style.msTransform = "rotate(" + minuteRotate +")";
document.getElementById("minute").style.mozTransform = "rotate(" + minuteRotate +")";
document.getElementById("minute").style.oTransform = "rotate(" + minuteRotate +")";
document.getElementById("minute").style.webkitTransform = "rotate(" + minuteRotate +")";
document.getElementById("minute").style.transform = "rotate(" + minuteRotate +")";
document.getElementById("second").style.msTransform = "rotate(" + secondRotate +")";
document.getElementById("second").style.mozTransform = "rotate(" + secondRotate +")";
document.getElementById("second").style.oTransform = "rotate(" + secondRotate +")";
document.getElementById("second").style.webkitTransform = "rotate(" + secondRotate +")";
document.getElementById("second").style.transform = "rotate(" + secondRotate +")";
// Aufruf starten
window.setTimeout("GetAndSetTime()", 1000);

Hier nochmals alle 3 Dateien (index.html, style.css, skript.js):

<!Doctype html>
<html>
  <head>
    <title>Analoguhr - Projekte</title>
    <meta name="author" content="Benjamin Jung" />
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
  </head>
 
  <body onload="GetAndSetTime()">
    <div id="clock">
      <!-- Zeiger -->
      <div id="hour"></div>
      <div id="minute"></div>
      <div id="second"></div>
      <!-- Verzierung -->
      <div id="image"></div>
      <div id="point"></div>
      <span style="top: 0px; left: 138px;" class="number">12</span>
      <span style="top: 138px; left: 276px;" class="number">3</span>
      <span style="top: 276px; left: 138px;" class="number">6</span>
      <span style="top: 138px; left: 0px;" class="number">9</span>
    </div>
  </body>
</html>
/* Hauptelement */
#clock
{
    width: 300px;
    height: 300px;
    -webkit-border-top-left-radius: 150px;
    -moz-border-top-left-radius: 150px;
    -ms-border-top-left-radius: 150px;
    -o-border-top-left-radius: 150px;
    border-top-left-radius: 150px;
    -webkit-border-top-right-radius: 150px;
    -moz-border-top-right-radius: 150px;
    -ms-border-top-right-radius: 150px;
    -o-border-top-right-radius: 150px;
    border-top-right-radius: 150px;
    -webkit-border-bottom-left-radius: 150px;
    -ms-border-bottom-left-radius: 150px;
    -moz-border-bottom-left-radius: 150px;
    -o-border-bottom-left-radius: 150px;
    border-bottom-left-radius: 150px;
    -webkit-border-bottom-right-radius: 150px;
    -ms-border-bottom-right-radius: 150px;
    -moz-border-bottom-right-radius: 150px;
    -o-border-bottom-right-radius: 150px;
    border-bottom-right-radius: 150px;
    background-color: lime;
    position: relative;
}
 
 
/* Zeiger */
#hour
{
    width: 6px;
    height: 110px;
    top: 40px;
    left: 147px;
}
 
#minute
{
    width: 4px;
    height: 140px;
    top: 10px;
    left: 148px;
}
 
#second
{
    width: 2px;
    height: 140px;
    top: 10px;
    left: 149px;
}
 
#hour, #minute, #second
{
    position: absolute;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background-color: blue;
}
 
 
/* Verzierung */
#image
{
    width: 300px;
    height: 300px;
    background: url("image.png") no-repeat;
}
 
#point
{
    width: 12px;
    height: 12px;
    position: absolute;
    top: 144px;
    left: 144px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    -ms-border-top-left-radius: 6px;
    -o-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    -ms-border-top-right-radius: 6px;
    -o-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -ms-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -o-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -ms-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -o-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: red;
}
 
.number
{
    position: absolute;
    font-family: Times;
    font-size: 20px;
    font-weight: bold;
    color: blue;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
}
function GetAndSetTime()
{
    // Daten ermitteln und umrechnen
    var date = new Date();
    var hourHelp = date.getHours() >= 12 ? date.getHours() - 12 : date.getHours();
    var hourRotate = ((hourHelp * 30) + (date.getMinutes() / 2)) + "deg";
    var minuteRotate = ((date.getMinutes() * 6) + (date.getSeconds() / 10)) + "deg";
    var secondRotate = (date.getSeconds() * 6) + "deg";
    // Anwenden
    document.getElementById("hour").style.msTransform = "rotate(" + hourRotate +")";
    document.getElementById("hour").style.mozTransform = "rotate(" + hourRotate +")";
    document.getElementById("hour").style.oTransform = "rotate(" + hourRotate +")";
    document.getElementById("hour").style.webkitTransform = "rotate(" + hourRotate +")";
    document.getElementById("hour").style.transform = "rotate(" + hourRotate +")";
    document.getElementById("minute").style.msTransform = "rotate(" + minuteRotate +")";
    document.getElementById("minute").style.mozTransform = "rotate(" + minuteRotate +")";
    document.getElementById("minute").style.oTransform = "rotate(" + minuteRotate +")";
    document.getElementById("minute").style.webkitTransform = "rotate(" + minuteRotate +")";
    document.getElementById("minute").style.transform = "rotate(" + minuteRotate +")";
    document.getElementById("second").style.msTransform = "rotate(" + secondRotate +")";
    document.getElementById("second").style.mozTransform = "rotate(" + secondRotate +")";
    document.getElementById("second").style.oTransform = "rotate(" + secondRotate +")";
    document.getElementById("second").style.webkitTransform = "rotate(" + secondRotate +")";
    document.getElementById("second").style.transform = "rotate(" + secondRotate +")";
    // Aufruf starten
    window.setTimeout("GetAndSetTime()", 1000);
}
Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de