Cómo implementar * object * para mejorar mi programa de muestra de reloj con javascript
El objetivo de este trabajo es entender y jugar con el significado de algunosobjeto concepto que he escuchado alrededor
Sobre la generosidadHay muchas maneras / enfoques diferentes para hacer esto.
Miintentos no están realmente limpios: para agregar un segundo reloj, con otra zona horaria, tengo que editar 3 lugares diferentes. Esto no está bien (ver al final de la respuesta).
¿Cómo podría hacer algo más?útil?
En el comienzo:publicado: la pregunta inicial era acerca de elegir entre jQuery y mootools, ahora elección como se hizo; El objetivo es mejorar esto, con el uso demootools.
Hay una pequeña muestra / demo que escribí para jugar con javascript y svg:
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>
(Originalmente publicado enjsfiddle) como no tengo mucha experiencia con javascript jquery y / o mootools, me gustaría saber si existen algunos métodos más simples, tal vez al escribir esto de una manera diferente.
cómo hacer una rotación simple sobre un centro fijo, utilizando jquery o mootools:
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);
cómoobjetar este código? (Si incluso podría ser una buena cosa) ...
¡Todas las muestras que utilizan orientación de objetos, biblioteca específica o son bienvenidas!