"design uhr" mit javascript basteln?

H

HuRriC4nE

Grünschnabel
Hallo ihr,
ich habe mal eben ne ganz generelle frage: kann ich per javascript ne uhr basteln, die die zeit von irgendwo einliest (muss nicht grad irgendeine atomuhr sein) und danach verschiedene zeiger ausrichtet, die sich aber danach weiter mit einer gewissen geschwindigkeit weiterdrehen?

eine andere möglichkeit wäre ein bild, das immer langsam von links nach rechts vorbeiläuft mit zahlen drauf. Aber was macht man, wenn das bild komplett einmal durchgelaufen ist?

Falls ihr wisst, ob man sowas machen kann bitte sagen. Genau Wie es geht brauch ich jetzt noch gar nicht wissen, aber wenn ihr sowas schonmal gemacht habt und genau wisst, wies geht (falls es denn geht) wäre ich sehr dankbar.

Gruß HuRr/C4nE
 
  • Variante 1:
    Du speicherst für jede Zeigerstellung ein Bild, die Zeiger blendest du dann nach Bedarf ein.
    Nachteil: du brauchst viele Bilder für die Zeiger
    Vorteil: du bist frei im Zeigerdesign

  • Variante 2:
    Wenn dir als Zeiger simple geometrische Formen reichen, kannst du sie mit Walter Zorns Grafikbibliothek zeichnen.

  • Variante 3:
    SVG(Scalable Vector Graphics) Ähnlich wie 2, ermöglicht aber mehr Vielfalt bei den geometrischen Formen und dürfte eine bessere Performance haben.
    Nachteil: der User muss einen SVG-Viewer installiert haben, was in Browsern derzeit standardmässig noch nicht der Fall ist.
    SVG-Uhr

Dass die Uhr weiterläuft, erreichst du, indem du per setInterval() in Sekundenabständen eine JS-Funktion aufrufst, welche die angezeigte Uhrzeit aktualisiert.


Ich würd auf JS verzichten und es stattdessen mit Flash machen(wenn ich Flash könnte:))
 
Hi,

in meiner JS-Anfangszeit habe ich mal so etwas ähnliches gemacht. Die Uhr bestand aus einem Bild für ein Zifferblatt und etlichen Einzelbildern für beide Zeiger in allen möglichen Rotationswinkeln, die als transparente GIFs über den Hintergrund gelegt wurden.

ich muss mal sehen, ob ich die Datei noch finde.

Gruß

EDIT: Mal wieder zu spät - und ja: Flash wäre sicherlich eine einfachere Variante. Auf meiner Seite gibts z.B. zwei verschiedene Uhren dieser Art zum Download. ;)
.
 
also die mausuhr is jawohl der hammer
echt nettes teil.

ich hätte bei der sich drehenden uhr (sprich nicht die durchlaufleiste) an sowas gedacht:

3 kreise, der äußere immer größerer als der innere.
diese kreise sind erst leer und werden dann langsam voll (wie ein winkel, der erst immer größer wird und einen kreis irgendwann komplett aufgefüllt hat(nach 60 sekunden/minuten/12stunden), um ihn dann wieder zu leeren.
falls das ohne flash geht wäre das super ( da ich das programm nicht habe mir aber auch das entsprechende kleingeld dafür fehlt)

ps das nächste Mal achte ich auf die Groß/Kleinschreibung
 
Zuletzt bearbeitet:
ich hab mal versucht eine einfache digitaluhr zu bauen.
Ich hab dazu im netz ein script gefunden, das je nach der entsprechenden zeit
hintereinander 6 bilder anzeigt (genaugenommen 8, da zwischen den ziffern noch 2 ":" sind)

au der seite funktioniert das auch wunderbar, nur bei mir nicht. das einzige was ich gemacht hab ist, dass mein verzeichneis "watch" heißt, in dem die einzelnen dateien der zahlen sind. Ich hab sie letztendlich sogar alle "db1.jpg" bis "db10.jpg" genannt.

meine leicht abgewandelte version ist:
<BODY ONLOAD="init()">

<SCRIPT LANGUAGE="JavaScript">
<!--
// (C) 1999 Klaus Hentschel [ All rights reserved ].
// e-mail: Black_runner@t-online.de
// www: http://Java.topcool.de
// www: http://home.t-online.de/home/Black_runner/
// Bitte entfernen sie diesen Vermerk nicht!

function init() {
var ii;
for(ii=1; ii<10; ii++) { //Anzahl der Grafiken
img=new Image();
img.src="watch/"+ii+".jpg"; //dg = Name der Grafiken
}
setTimeout("clock()", "10");
}
function clock() {
var ii;
var date=new Date(); //Abfrage am System
var hh=date.getHours(); //Berechnung der Zeit
ii=Math.floor(hh/10); //Stunden
document.h1.src="watch/"+ii+".jpg"
ii=hh%10;
document.h2.src="watch/"+ii+".jpg"
var mm=date.getMinutes(); //Minuten
ii=Math.floor(mm/10);
document.m1.src="watch/"+ii+".jpg"
ii=mm%10;
document.m2.src="watch/"+ii+".jpg"
var ss=date.getSeconds(); //Sekunden
ii=Math.floor(ss/10);
document.s1.src="watch/"+ii+".jpg"
ii=ss%10;
document.s2.src="watch/"+ii+".jpg"
setTimeout("clock()", "10");
}
//-->
</SCRIPT>
<TABLE CELLPADDING="0" CELLSPACING="0">
<TR>
<TD>
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="h1">
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="h2">
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="m1">
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="m2">
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="s1">
<IMG SRC="watch/dg0.jpg" WIDTH="30" HEIGHT="30" NAME="s2"> </TD>
</TR>
</TABLE>
Zum Vergrößern anklicken....

habt ihr ne ahnung was ich falsch gemacht hab?

auf der seite heißen die dateien für die zahlen letztendlich genauso, nur das ich .jpg's nutze anstatt .gif's .
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück