Das Ziel dieser Arbeit ist es, die Bedeutung einiger zu verstehen und damit zu spielenObjekt Konzept, das ich in der Umgebung gehört habe.

Über das Kopfgeld

Es gibt viele verschiedene Wege / Ansätze, um dies zu tun.

Meineversucht sind nicht wirklich sauber: um eine 2. uhr hinzuzufügen, muss ich mit einer anderen zeitzone 3 verschiedene orte bearbeiten. Das ist nicht gut (siehe unten in der Antwort).

Wie könnte ich etwas mehr tunsinnvoll?

Am Anfang:

hat es geposted: die anfängliche frage war, ob man sich zwischen jquery und mootools entscheiden sollte. Ziel ist es, dies durch den Einsatz von zu verbessernmootools.

Es gibt ein kleines Beispiel / Demo, das ich geschrieben habe, um mit Javascript und svg zu spielen:

var cx  =128;
var cy  =128;
var slen=120;
var mlen=116;
var hlen= 80;
var selem;
var melem;
var helem;
function setvars() {
    selem=document.getElementById("seconds");
    melem=document.getElementById("minutes");
    helem=document.getElementById("hours");
    drawtime();
};
function drawtime() {
    var now=new Date();
    var nows=now.getTime()%60000;
    var nowm=now.getMinutes()*1.0+1.0*nows/60000;
    var nowh=now.getHours()*1.0+1.0*nowm/60;
    var sposx=cx + slen * Math.sin( nows / 30000 * Math.PI );
    var sposy=cy - slen * Math.cos( nows / 30000 * Math.PI );
    var mposx=cx + mlen * Math.sin( nowm / 30 * Math.PI );
    var mposy=cy - mlen * Math.cos( nowm / 30 * Math.PI );
    var hposx=cx + hlen * Math.sin( nowh / 6 * Math.PI );
    var hposy=cy - hlen * Math.cos( nowh / 6 * Math.PI );
    selem.setAttribute("x1",sposx);
    selem.setAttribute("y1",sposy);
    selem.setAttribute("x2",sposx);
    selem.setAttribute("y2",sposy);
    melem.setAttribute("x2",mposx);
    melem.setAttribute("y2",mposy);
    helem.setAttribute("x2",hposx);
    helem.setAttribute("y2",hposy);
    window.setTimeout(drawtime,80)
};
setvars();

#box1    { stroke: black; }
#minutes { stroke: #2266AA; }
#hours   { stroke: #3388CC; }
#seconds { stroke: #CCCC22; }
line,circle {
    opacity:0.65;
    fill:none;
    stroke-width:8;
    stroke-linecap:round;
    stroke-linejoin:round;
    marker:none;
    stroke-miterlimit:4;
    stroke-dasharray:none;
    stroke-opacity:1;
    visibility:visible;
    display:inline;
    overflow:visible;
    enable-background:accumulate
}

<svg xmlns="http://www.w3.org/2000/svg" id="svg2" width="100%"
     height="100%" viewBox="0 0 900 256" version="1.0">
    <title  id="title1">Clock</title>
    <circle id="box1"    cy="128" cx="128"  r="124" />
    <line   id="hours"   x1="128" y1="128" x2="128"  y2="48" />
    <line   id="minutes" x1="128" y1="128" x2="244" y2="128" />
    <line   id="seconds" x1="128"   y1="8" x2="128"   y2="8" />
</svg>

(Ursprünglich geschrieben amjsfiddle) da ich mit javascript jquery und / oder mootools nicht sehr erfahren bin, würde ich gerne wissen, ob es einfachere methoden gibt, vielleicht indem ich diese auf eine andere art und weise schreibe.

wie man mit jquery oder mootools eine einfache Rotation um ein festes Zentrum ausführt:

var hposx=cx + hlen * Math.sin( nowh / 6 * Math.PI );
var hposy=cy - hlen * Math.cos( nowh / 6 * Math.PI );
helem.setAttribute("x2",hposx);
helem.setAttribute("y2",hposy);

wie manobjektivieren dieser Code? (Wenn es auch nur eine gute Sache sein könnte) ...

Alle Beispiele, die Objektorientierung, spezifische Bibliothek oder anderes verwenden, sind willkommen!