{"id":1789,"date":"2012-02-26T10:45:31","date_gmt":"2012-02-26T10:45:31","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1789"},"modified":"2019-08-23T05:36:54","modified_gmt":"2019-08-23T05:36:54","slug":"como-mostrar-un-reloj-digital-en-tu-pagina-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-mostrar-un-reloj-digital-en-tu-pagina-con-javascript\/","title":{"rendered":"Como mostrar un reloj digital en tu p\u00e1gina web con JavaScript"},"content":{"rendered":"

Descubre como mostrar un reloj digital<\/strong> en tu p\u00e1gina web con JavaScript<\/strong> y totalmente personalizable a trav\u00e9s de las hojas de estilos CSS<\/strong>.<\/p>\n

En este art\u00edculo vas a ver como mostrar la fecha<\/strong> y hora<\/strong> actual en una p\u00e1gina web de forma totalmente personalizada utilizando JavaScript<\/strong>.<\/p>\n

En este caso, la fecha queda impresa de forma fija en pantalla y el reloj<\/strong> avanza con el secundero.<\/p>\n

Para conseguirlo voy a utilizar la funci\u00f3n Date<\/em> que ofrece el lenguaje de programaci\u00f3n JavaScript<\/strong>.<\/p>\n

La funci\u00f3n Date<\/em> es ideal para trabajar con fechas ya que nos va a permitir conseguir el a\u00f1o, el mes, el d\u00eda, la hora, los minutos y los segundos de una fecha dada.<\/p>\n

En el caso del ejemplo en funcionamiento quiero mostrar la fecha y hora actual pero no solo eso. Vas a ver como el reloj<\/strong> corre a la misma vez que el reloj<\/strong> de tu computadora o reloj<\/strong> de mano.<\/p>\n

Algunas aplicaciones webs requieren estar pendiente del tiempo actual y puede resultar imprescindible mostrar a los usuarios en pantalla un reloj digital<\/strong> con la hora actual.<\/p>\n

Mostrar un reloj digital<\/strong> en marcha se puede conseguir f\u00e1cilmente con JavaScript<\/strong>.<\/p>\n

Contenedores HTML para la fecha y la hora<\/h3>\n

En el cuerpo de la p\u00e1gina o dentro de la etiqueta <body> puedes agregar, all\u00ed donde quieras, el contenedor con la fecha y la hora inicialmente vac\u00edos. Lo estar\u00e9 rellenado desde el c\u00f3digo JavaScript<\/strong>.<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"date"<\/span>><\/span>\n    <span<\/span><\/a> id<\/span>=<\/span>"weekDay"<\/span> class<\/span>=<\/span>"weekDay"<\/span>><\/<\/span>span<\/span><\/a>><\/span>, \n    <span<\/span><\/a> id<\/span>=<\/span>"day"<\/span> class<\/span>=<\/span>"day"<\/span>><\/<\/span>span<\/span><\/a>><\/span> de\n    <span<\/span><\/a> id<\/span>=<\/span>"month"<\/span> class<\/span>=<\/span>"month"<\/span>><\/<\/span>span<\/span><\/a>><\/span> del\n    <span<\/span><\/a> id<\/span>=<\/span>"year"<\/span> class<\/span>=<\/span>"year"<\/span>><\/<\/span>span<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<div<\/span><\/a> class<\/span>=<\/span>"clock"<\/span>><\/span>\n    <span<\/span><\/a> id<\/span>=<\/span>"hours"<\/span> class<\/span>=<\/span>"hours"<\/span>><\/<\/span>span<\/span><\/a>><\/span> :\n    <span<\/span><\/a> id<\/span>=<\/span>"minutes"<\/span> class<\/span>=<\/span>"minutes"<\/span>><\/<\/span>span<\/span><\/a>><\/span> :\n    <span<\/span><\/a> id<\/span>=<\/span>"seconds"<\/span> class<\/span>=<\/span>"seconds"<\/span>><\/<\/span>span<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Con esto ya tenemos la estructura HTML<\/strong> que permite separar cada elemento de la fecha y la hora.<\/p>\n
Por un lado, tenemos un contenedor que contiene:<\/p>\n