<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body{ background-image : url(imagenes/menu3.jpg); } DIV.contenedor_reloj { width : 200px; height : 200px; position : absolute; left : 5px; top : 5px; } DIV.fechadehoy{ width: 70px; position : absolute; font-size:9px; z-index:101; color : blue; left:65px; top:85px; text-align:center; } DIV.ptsegundero{ width : 3px; height : 3px; position : absolute; background-color : red; clear: left; font-size:0px; } DIV.ptminutero{ width : 4px; height : 4px; position : absolute; background-color : blue; clear: left; font-size:0px; } DIV.pthoras{ width : 5px; height : 5px; position : absolute; background-color : black; clear: left; font-size:0px; } DIV.mio{ width: 90px; position : absolute; font-size:9px; z-index:102; color : black; left:120px; top:200px; clear: left; } DIV.ptseg{ width : 1px; height : 1px; position : absolute; background-color : red; clear: left; font-size:0px; } DIV.ptmin{ width : 1px; height : 1px;
position : absolute; background-color : blue; clear: left; font-size:0px; } DIV.pthor{ width : 2px; height : 2px; position : absolute; background-color : gray; clear: left; font-size:0px; } DIV.numeros{ position : absolute; clear: left; font-size:8px; z-index:100; color : black; } DIV.destacado{ width : 2px; height : 2px; background-color : gray; position : absolute; clear: left; font-size:0px; z-index:100; }
</style>
<title>
</title>
</head>
<body>
<div id="contenedor" class="contenedor_reloj">
</div>
<script type="text/javascript">
document.oncontextmenu = function(){return false}
// hecho por JALL
// http://personal-de-jall.webcindario.com
// ja_lopezl@yahoo.es
// GPL
// reconocer IE por setAttribute "className"
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
// abreviando Pi
var Pi = Math.PI;
// origen de coordenadas = mitad del cuadrado del contenedor
var x0 = 100;
var y0 = 100;
// radio 12 numeros
var rad0 = 100;
// radio horas
var rad1 = 90;
// radio minutos
var rad2 = 80;
//radio segundos
var rad3 = 60;
// radio 60 numeros
var rad4 = 70;
// inicializamos las variables coordenadas de los puntos
var x = 0;
var y = 0;
// arrays que guardan los puntos móviles
var arrSeg = new Array();
var arrMin = new Array();
var arrHor = new Array();
var Meses = new Array(
"Enero", "Febrero", "Marzo",
"Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre",
"Octubre", "Noviembre", "Diciciembre");
var Dias = new Array(
"Domingo", "Lunes", "Martes",
"Miércoles", "Jueves", "Viernes",
"Sábado");
// función que escribe los números que aparecen en el reloj
function escribeTextos(){
//fecha de hoy
var Hoy = new Date();
var textoFecha = Dias[Hoy.getDay()] + ", " +
Hoy.getDate() + " de " +
Meses[Hoy.getMonth()] + " del " +
Hoy.getFullYear();
fecha = document.createTextNode(textoFecha);
divFecha = document.createElement("div");
if(IE) divFecha.setAttribute("className","fechadehoy");
else divFecha.setAttribute("class","fechadehoy");
divFecha.appendChild(fecha);
document.getElementById('contenedor').appendChild(divFecha);
// 12 unidades
for(i=0;i<12;i++){
x = x0 + rad0*Math.cos((i*Pi/6) - (Pi/2))-1;
y = y0 + rad0*Math.sin((i*Pi/6) - (Pi/2))-5;
(i== 0)?t = document.createTextNode("12"):t = document.createTextNode(""+i+"");
numero= document.createElement("div");
if(IE) numero.setAttribute("className","numeros");
else numero.setAttribute("class","numeros");
numero.appendChild(t);
numero.style.left = x + "px";
numero.style.top = y + "px";
document.getElementById('contenedor').appendChild(numero);
}
textomy = "Made by JALL. Powered JavaScript";
my = document.createTextNode(textomy);
divmy = document.createElement("div");
if(IE) divmy.setAttribute("className","mio");
else divmy.setAttribute("class","mio");
divmy.appendChild(my);
document.getElementById('contenedor').appendChild(divmy);
// 60 unidades
var destacados = ["0","5","10","15","20","25","30","35","40","45","50","55"];
for(i=0;i<12;i++){
x = x0 + rad4*Math.cos((i*Pi/6) - (Pi/2))-3;
y = y0 + rad4*Math.sin((i*Pi/6) - (Pi/2))-5;
t = document.createTextNode(""+destacados[i]+"");
numero= document.createElement("div");
if(IE) numero.setAttribute("className","numeros");
else numero.setAttribute("class","numeros");
numero.appendChild(t);
numero.style.left = x + "px";
numero.style.top = y + "px";
document.getElementById('contenedor').appendChild(numero);
}
// escritos los números, dibujamos los puntos fijos
crearPuntosFijos();
}
// función que dibuja los puntos invariantes del reloj
function crearPuntosFijos(){
// segundos
for(i=0;i<60;i++){
x = x0 + rad3*Math.cos((i*Pi/30) - (Pi/2));
y = y0 + rad3*Math.sin((i*Pi/30) - (Pi/2));
punto= document.createElement("div");
if(i%5 == 0){
if(IE) punto.setAttribute("className","destacado");
else punto.setAttribute("class","destacado");
}
else{
if(IE) punto.setAttribute("className","ptseg");
else punto.setAttribute("class","ptseg");
}
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// minutos
for(i=0;i<60;i++){
x = x0 + rad2*Math.cos((i*Pi/30) - (Pi/2));
y = y0 + rad2*Math.sin((i*Pi/30) - (Pi/2));
punto= document.createElement("div");
if(i%5 == 0){
if(IE) punto.setAttribute("className","destacado");
else punto.setAttribute("class","destacado");
}
else{
if(IE) punto.setAttribute("className","ptmin");
else punto.setAttribute("class","ptmin");
}
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
//horas
for(i=0;i<12;i++){
x = x0 + rad1*Math.cos((i*Pi/6) - (Pi/2));
y = y0 + rad1*Math.sin((i*Pi/6) - (Pi/2));
punto = document.createElement("div");
if(IE) punto.setAttribute("className","pthor");
else punto.setAttribute("class","pthor");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// dibujados los puntos fijos, creamos los puntos móviles
crearPuntosMoviles();
}
// función que crea los puntos móviles aunque no los muestre (display:none)
// los puntos(objetos) creados son almacenados en tres arrays
// para una posterior manipulación por la función rotarPuntosMoviles
function crearPuntosMoviles(){
// segundero
for(i=0;i<60;i++){
x = x0 + rad3*Math.cos((i*Pi/30) - (Pi/2))-1;
y = y0 + rad3*Math.sin((i*Pi/30) - (Pi/2))-1;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ptsegundero");
else punto.setAttribute("class","ptsegundero");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.display = "none";
document.getElementById('contenedor').appendChild(punto);
arrSeg[i] = punto;
}
//minutero
for(i=0;i<60;i++){
x = x0 + rad2*Math.cos((i*Pi/30) - (Pi/2))-2;
y = y0 + rad2*Math.sin((i*Pi/30) - (Pi/2));
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ptminutero");
else punto.setAttribute("class","ptminutero");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.display = "none";
document.getElementById('contenedor').appendChild(punto);
arrMin[i] = punto;
}
//horario
for(i=0;i<12;i++){
x = x0 + rad1*Math.cos((i*Pi/6) - (Pi/2))-3;
y = y0 + rad1*Math.sin((i*Pi/6) - (Pi/2))-3;
punto = document.createElement("div");
if(IE) punto.setAttribute("className","pthoras");
else punto.setAttribute("class","pthoras");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.display = "none";
document.getElementById('contenedor').appendChild(punto);
arrHor[i] = punto;
}
// inicializa la rotación con la hora, minuto y segundos actuales
Ahora = new Date();
AhoraSeg = Ahora.getSeconds();
AhoraMin = Ahora.getMinutes();
AhoraHor = Ahora.getHours();
if (AhoraHor >= 12) AhoraHor = AhoraHor-12;
// inicializamos la rotación propiamente dicha
rotarPuntosMoviles(AhoraSeg,AhoraMin,AhoraHor);
}
// función recursiva que va rotando los puntos móviles
// segundos, minutos y horas
function rotarPuntosMoviles(n,m,p){
arrSeg[n].style.display = "block";
arrMin[m].style.display = "block";
arrHor[p].style.display = "block";
switch(n){
case 0:
arrSeg[59].style.display = "none";
arrSeg[58].style.display = "none";
arrSeg[57].style.display = "none";
break;
case 1:
arrSeg[0].style.display = "none";
arrSeg[59].style.display = "none";
break;
default:
arrSeg[n-1].style.display = "none";
arrSeg[n-2].style.display = "none";
break;
}
(m==0)? arrMin[59].style.display = "none": arrMin[m-1].style.display = "none";
(p==0)? arrHor[11].style.display = "none": arrHor[p-1].style.display = "none";
Ahora = new Date();
AhoraSeg = Ahora.getSeconds();
AhoraMin = Ahora.getMinutes();
AhoraHor = Ahora.getHours();
if (AhoraHor >= 12) AhoraHor = AhoraHor-12;
var funcion = "rotarPuntosMoviles("+AhoraSeg+","+AhoraMin+","+AhoraHor+")";
var rotador = setTimeout(funcion,1000);
}
escribeTextos();
</script>
<noscript>
Reloj analógico en javascript. Hecho por JALL. Hecho en JavaScript. Analogic clock in JavaScript. Made by JALL. Powered JavaScript
</noscript>
<br>
</body>
</html>
