Guía para insertar un reloj analógico en WordPress

Mantén a la vista el Reloj Analógico en tu sitio de WordPress, fácil de insertar, y con un potente efecto visual. El Reloj Analógico se adapta a todos los dispositivos.

⏰ Añade un reloj analógico en tu WordPress

¿Quieres mostrar la hora en tu sitio web con un reloj analógico elegante? Aquí tienes un código completo que puedes insertar en el widget de barra lateral de tu WordPress.

RELOJ WEB

Pasos:

  1. Entra en tu panel de administración de WordPress.
  2. Ve a Apariencia > Widgets.
  3. Añade un widget de tipo HTML personalizado en la barra lateral.
  4. Copia y pega el siguiente código completo en el widget:

html

<html>
<head>
<title>RELOJ WEB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.reloj-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px; /* tamaño máximo */
  margin: 0 auto;   /* centra horizontalmente */
  padding: 10px;
  box-sizing: border-box;
}
canvas {
  width: 100%;
  height: auto;
  display: block;
}
</style>
</head>

<body>
  <div class="reloj-container">
    <canvas id="my_canvas" width="420" height="420"></canvas>
  </div>

<script>
var angle_jump=6;
var dt= new Date();

sec = dt.getSeconds()*angle_jump;
var min=dt.getMinutes();
min=min*angle_jump; 
min=min + (sec/360)
var hour=dt.getHours();
hour=hour*30;   
hour=hour + (min/12);

var ang_second=90-sec;
var ang_minute=90-min;
var ang_hour=90-hour;

var r=100;
var my_canvas=document.getElementById("my_canvas");
var gctx = my_canvas.getContext("2d");

var x=my_canvas.width/2;
var y=my_canvas.height/2;
speed=1000;
arc_angle=10;

my_function=function my_function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);

// círculo exterior con sombra
gctx.beginPath();
gctx.strokeStyle= '#0B033B';
gctx.lineWidth=10;
gctx.shadowColor = 'rgba(0,0,0,0.5)';
gctx.shadowBlur = 15;
gctx.shadowOffsetX = 5;
gctx.shadowOffsetY = 5;
gctx.arc(x,y,r*1.4,0,2*Math.PI);
gctx.stroke();

// reset sombra
gctx.shadowColor = 'transparent';
gctx.shadowBlur = 0;
gctx.shadowOffsetX = 0;
gctx.shadowOffsetY = 0;

gctx.lineWidth=1;

// números y marcas
var h=2;
gctx.textAlign = "center";
gctx.textBaseline = "middle";
gctx.font = '36px serif';

for(j=0;j<360;j += angle_jump){
  j_radian=j*(Math.PI/180);
  gctx.beginPath();
  gctx.strokeStyle= '#464623';

  if((j % (5*angle_jump))==0){
    var y1_text=y+ 0.85*r*Math.sin(j_radian);
    var x1_text=x+ 0.85*r*Math.cos(j_radian);
    if(h<12){ h=h+1; } else { h=1; }

    // sombra en números
    gctx.shadowColor = 'rgba(0,0,0,0.4)';
    gctx.shadowBlur = 6;
    gctx.shadowOffsetX = 2;
    gctx.shadowOffsetY = 2;
    gctx.fillText(h,x1_text,y1_text);

    // reset sombra
    gctx.shadowColor = 'transparent';
    gctx.shadowBlur = 0;
    gctx.shadowOffsetX = 0;
    gctx.shadowOffsetY = 0;

    // rayas largas en todos los números
    var y1_out = y + 1.05*r*Math.sin(j_radian);
    var x1_out = x + 1.05*r*Math.cos(j_radian);
    var y2_out = y + 1.3*r*Math.sin(j_radian);
    var x2_out = x + 1.3*r*Math.cos(j_radian);
    gctx.moveTo(x1_out,y1_out);
    gctx.lineTo(x2_out,y2_out);
    gctx.stroke();

  } else {
    // rayas normales
    var y1_out = y + 1.1*r*Math.sin(j_radian);
    var x1_out = x + 1.1*r*Math.cos(j_radian);
    var y2_out = y + 1.2*r*Math.sin(j_radian);
    var x2_out = x + 1.2*r*Math.cos(j_radian);
    gctx.moveTo(x1_out,y1_out);
    gctx.lineTo(x2_out,y2_out);
    gctx.stroke();
  }
}

// segundero
gctx.beginPath();
gctx.strokeStyle= '#7CC0F5';
var startAngle=(1/180) * (360-ang_second);
var a_end_ang=(1/180) * (360-(ang_second + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_second + 180 + arc_angle));
var y1=y+ r*Math.sin(startAngle*Math.PI);
var x1=x+ r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#7CC0F5';
gctx.fill();
gctx.stroke();

// minutero
gctx.beginPath();
gctx.strokeStyle= '#181500';
var startAngle=(1/180) * (360-ang_minute);
var a_end_ang=(1/180) * (360-(ang_minute + 180 -arc_angle));
var a_start_ang=(1/180) *(360-(ang_minute + 180 + arc_angle));
var y1=y+ 0.9*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.9*r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.3*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#181500';
gctx.fill();
gctx.stroke();

// horario
gctx.beginPath();
gctx.strokeStyle= '#181500';
var startAngle=(1/180) * (360-ang_hour);
var a_end_ang=(1/180) * (360-(ang_hour + 180 -(arc_angle*2)));
var a_start_ang=(1/180) *(360-(ang_hour + 180 + (arc_angle*2)));
var y1=y+ 0.8*r*Math.sin(startAngle*Math.PI);
var x1=x+ 0.8*r*Math.cos(startAngle*Math.PI);
gctx.moveTo(x1,y1);
gctx.arc(x,y,0.15*r,a_start_ang*Math.PI,a_end_ang*Math.PI);
gctx.lineTo(x1,y1);
gctx.fillStyle = '#181500';
gctx.fill();
gctx.stroke();

// círculo central
gctx.beginPath();
gctx.strokeStyle= '#000000';
gctx.arc(x,y,3,0,2*Math.PI); 
gctx.fillStyle = '#282746';
gctx.fill();
gctx.stroke();

my_function2();
}

my_function2=function my_function2(){
if(ang_second > -264){  
  ang_second=ang_second-angle_jump;
  setTimeout('my_function()',speed);
}else{
  ang_second=90;
  if(ang_minute > -264){
    ang_minute=ang_minute - angle_jump;
  }else{
    ang_minute=90;
    ang_hour=ang_hour-angle_jump;
  } 
  setTimeout('my_function()',speed);
}
}

my_function();
</script>
</body>
</html>

3. Guardar y comprobar

  • Guarda el widget.
  • Ve a tu sitio y verás el reloj analógico funcionando en la barra lateral.

Resumen de la creación del reloj analógico

  1. Canvas de HTML5
    • El reloj se dibuja dentro de un elemento <canvas> de HTML.
    • Este canvas es un área gráfica donde se pueden trazar líneas, círculos y texto con JavaScript.
  2. Contexto gráfico (getContext("2d"))
    • Se obtiene el contexto 2D del canvas, que permite dibujar formas y aplicar estilos.
    • Con este contexto (gctx) se trazan los círculos, rayas y números.
  3. Cálculo de ángulos
    • Cada segundo equivale a 6° (360° / 60).
    • Cada minuto también equivale a 6°.
    • Cada hora equivale a 30° (360° / 12).
    • Se calculan los ángulos de las agujas en función de la hora actual (Date()).
  4. Dibujo de la esfera
    • Se dibuja un círculo exterior con borde azul oscuro y sombra para dar volumen.
    • Se añaden las rayas de los minutos y las rayas más largas en las posiciones de las horas.
    • Los números (1–12) se colocan alrededor del círculo, centrados y con sombra.
  5. Agujas del reloj
    • Segundero: delgado y de color azul claro.
    • Minutero: más grueso y oscuro.
    • Horario: más corto y ancho.
    • Cada aguja se dibuja como una línea con un pequeño arco en la base para dar efecto.
  6. Centro del reloj
    • Se dibuja un pequeño círculo en el centro para cubrir las uniones de las agujas.
  7. Animación
    • Una función (my_function) redibuja el reloj cada segundo.
    • Se usa setTimeout para actualizar los ángulos y mover las agujas en tiempo real.
  8. Estilos y centrado
    • El reloj se coloca dentro de un contenedor .reloj-container con CSS flexbox para que quede centrado en ordenador y móvil.
    • El canvas es responsivo (width:100%) para adaptarse al ancho del widget.

En resumen

El reloj se construye con:

  • HTML → para definir el canvas.
  • CSS → para centrarlo y hacerlo responsivo.
  • JavaScript → para calcular la hora, dibujar la esfera, los números, las rayas y las agujas, y actualizarlo cada segundo.

Esquema visual (imaginado)

  1. Círculo exterior → esfera del reloj.
  2. Rayas cortas → minutos.
  3. Rayas largas + números → horas.
  4. Agujas → hora, minuto y segundo.
  5. Centro → círculo pequeño que une las agujas.
  6. Animación → función que actualiza cada segundo.

En conclusión: el reloj se construye combinando HTML (canvas), CSS (centrado y responsivo) y JavaScript (cálculo de ángulos y animación).

Esquema visual del reloj analógico

1. Esfera del reloj

  • Un círculo exterior con borde azul oscuro y sombra.
  • Representa la base del reloj.

Código

   ●───────────────●
  /                 \
 ●                   ●
  \                 /
   ●───────────────●

2. Marcas de minutos y horas

  • 60 rayas alrededor de la esfera.
  • Las rayas de las horas (1–12) son más largas.
  • Sirven de guía para colocar los números.

Código

|   |   |   |   |   |   |   |   |   |

3. Números (1–12)

  • Colocados en posiciones radiales usando trigonometría.
  • Separados del borde para que no se peguen a las rayas.
  • Con sombra para dar volumen.

Código

       12
   11      1
10            2
   9        3
       6

4. Agujas

  • Segundero: delgado y azul claro.
  • Minutero: más largo y oscuro.
  • Horario: más corto y ancho.
  • Cada aguja se dibuja según el ángulo calculado con la hora actual.

Código

       |
       |
   ----●----
       |

5. Centro del reloj

  • Un pequeño círculo que cubre la unión de las agujas.
  • Da un acabado limpio y elegante.

6. Animación

  • Una función en JavaScript (my_function) redibuja el reloj cada segundo.
  • Se actualizan los ángulos de las agujas con la hora real (Date()).
  • Se usa setTimeout para que el reloj se mueva en tiempo real.

Resumen gráfico

  1. Esfera → círculo exterior con sombra.
  2. Marcas → rayas cortas y largas.
  3. Números → colocados alrededor con sombra.
  4. Agujas → hora, minuto y segundo.
  5. Centro → círculo pequeño.
  6. Animación → actualización cada segundo.
DIAGRAMA RELOJ

Ver otro ejemplo de Reloj Analógico.

Visitas:18
Compartir: Facebook Twitter LinkedIn WhatsApp

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *