Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.