Código de reloj dinámico HTML

& lthtml & gt

& lthead & gt

& ltmeta charset="utf-8"/& gt.

& lttitle>Canvas Clock</title>

& ltstyle type="text/CSS">

Departamento{

p>

Alineación del texto: centrado;

Margen superior: 250 píxeles

}

#clock{

Borde: 1 px sólido # ccc

}

& lt/style & gt;

& lt/head & gt;

& ltbody & gt

& ltdiv & gt

& ltcanvas id="reloj" altura="200 px" ancho="200 px"& gt. </canvas>

</div>

<script type="text/JavaScript" src="clock.js"></ script>

</body>

</html>

Partes de Js:

var DOM = document.getelementbyid('reloj');

var CTX = DOM.get context('2d');

var ancho = CTX.canvas.width;

var alto = CTX lienzo

var r = ancho/2;

Función drawBackground()

CTX save() ;

ctx .translate(r,r)<. /p>

CTX .comenzar ruta();

CTX .ancho de línea = 10;

CTX.arc(0,0,r-5,0,2* math.pi,false);

CTX.stroke();

var horas =;

CTX font ='18px Arial'; >

CTX . text align ='center';

CTX .text baseline ='middle';

números de hora . p>

var rad = 2 * math.PI/12 * I;

var x = math . = matemáticas . sin(rad)* *

ctx.fillText(número, x, y);

});

for(var I = 0 ;i<60;i++){

var rad = 2 *matemáticas.

PI/60 * I;

var x = matemáticas cos (rad) * (r-18);

var y = matemáticas sin (rad) * (r-18); ) );

CTX . comenzar ruta();

si (I % 5 = = 0 ) {

CTX estilo de relleno ='# 000'. ;

CTX . arc(x, y, 2, 0, 2*Math. PI, false

} En caso contrario {

CTX . = '#CCC';

CTX arc(x,y,2,0,2*Math.PI,false);

}

CTX. . fill();

}

}

Función drawHour (hora, minuto) {

CTX.save();

p>

CTX .begin ruta();

var rad = 2 * matemáticas. PI/12 *horas;

var mrad = 2 *matemáticas. PI/12/60 *min;

CTX rotar (rad+mrad);

CTX ancho de línea = 6

CTX . 'redondo';

CTX . mover a (0, 10);

CTX . trazo();

CTX .restore();

}

Función de dibujo minutos (minutos) {

CTX . );

CTX .begin path();

var rad = 2 * math. π/60 *min;

CTX .rotar(rad);

CTX ancho de línea = 3

CTX .

CTX . mover a (0, 10);

CTX .línea a (0, -r+30);

CTX.restore();

}

Función drawSecond(segundo) {

CTX.save();

p>

CTX .begin path();

CTX .fill style='# c 14543';

var rad = 2 *math. π/60 * segundos;

CTX rotar (rad);

CTX . 2, 20);

CTX . línea a (1,-r+18);

CTX línea a (-1,-r+18);

CTX.fill();

CTX.restore();

}

Función dibujar punto(){

CTX .begin path();

CTX .fill style="#fff";

CTX .arc(0, 0, 3, 0, 2 *math.

PI, falso);

CTX . fill();

}

Función dibujar() {

CTX clear rect(. 0, 0, ancho, alto);

var ahora = nueva fecha();

var hora = ahora obtener horas();

var minuto. = ahora. obtener minutos();

var segundo = ahora. obtener segundos();

dibujar fondo();

drawHour(hora, minuto) ;

drawMinute(minutos);

drawSecond(segundos);

draw dot();

CTX .restore();

}

draw();

setInterval(draw, 1000); //Ejecutar código cada segundo