Fecha y hora en el sitio. ¿Cómo visualizarla?

Fecha y hora en el sitio

Si tienes un blog o un sitio en el que muestras información relacionada con el tiempo, es muy probable que desees adicionar ciertos toquecillos para hacer más informativa su presentación.

Es muy cierto, existen plugins para ser utilizados en  ciertas plataformas y también que tu dispositivo o PC te puede brindar la fecha y hora, pero si deseas que estas se presenten en un gadget de blogger o donde desees, puedes disponer de los códigos y además editarlos a tu conveniencia.

Ejemplo de esto, es que puedas ver la fecha y hora tal como lo muestro en la barra lateral, aunque puedes estar requiriendo alguna otra aplicación, como hacer una cuenta regresiva hacia una fecha o inclusive mostrar el tiempo como titulo en la pestaña del explorador.

Fecha

El código para presentar la fecha en español es el siguiente:

<!-- Fecha Español  -->
<div style="text-align:center;color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:bold;" id="fechespanol">
<script>
   var now = new Date();
   var days = new Array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sábado');
   var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
   var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
   var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
   today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
   var fechespanol = document.getElementById('fechespanol');
   fechespanol.innerHTML = today;
</script>
</div>

Si deseas presentar la fecha en idioma inglés, solo necesitas cambiar las cadenas tal como se muestra en el siguiente código:

<!-- Fecha Inglés  -->
<div style="text-align:center;color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:normal;" id="basicdate">
<script>
   var now = new Date();
   var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
   var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
   var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
   var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
   today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
   var basicdate = document.getElementById('basicdate');
   basicdate.innerHTML = today;
</script>

</div>

Hora

Para presentar la hora puedes utilizar el siguiente código:

<!-- Hora  -->
<div style="font-size:34px;font-family:Arial;font-weight:bold;font-style:normal;" id="relojbasico"></div>

<script>
function clock()
{
   var digital = new Date();
   var hours = digital.getHours();
   var minutes = digital.getMinutes();
   var seconds = digital.getSeconds();
   if (minutes <= 9) minutes = "0" + minutes;
   if (seconds <= 9) seconds = "0" + seconds;
   dispTime = "Hora: " + hours + ":" + minutes + ":" + seconds;
   var relojbasico = document.getElementById('relojbasico');
   relojbasico.innerHTML = dispTime;
   setTimeout("clock()", 1000);
}
clock();
</script>
</div>

Fecha y hora

Si deseas hacer una presentación semejante a la que visualizas en la barra derecha de este sitio, puedes utilizar este código:

<div style="border:10px;border-style:ridge;border-color: #403c3c;border-radius:5px;text-align:center;padding:7px;background-color:#f1f1f1">
<!-- Fecha Español  -->
<div style="color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:normal;" id="fechespanol">
<script>
   var now = new Date();
   var days = new Array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sábado');
   var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
   var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
   var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
   today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
   var fechespanol = document.getElementById('fechespanol');
   fechespanol.innerHTML = today;
</script>
</div>
<hr />
<!-- Hora  -->
<div style="background-color:#000000;border-radius:5px;border-style:ridge;color:#17dc16;font-size:34px;font-family:Arial;font-weight:bold;font-style:normal;" id="basicclock"></div>
<script>
function clock()
{
   var digital = new Date();
   var hours = digital.getHours();
   var minutes = digital.getMinutes();
   var seconds = digital.getSeconds();
   if (minutes <= 9) minutes = "0" + minutes;
   if (seconds <= 9) seconds = "0" + seconds;
   dispTime = "Hora: " + hours + ":" + minutes + ":" + seconds;
   var basicclock = document.getElementById('basicclock');
   basicclock.innerHTML = dispTime;
   setTimeout("clock()", 1000);
}
clock();
</script>
</div>

Recuerda que puedes editar los atributos de los <div> en cuanto a colores, ancho, alto, tamaño de las fuentes, etc. según tus requerimientos.

Quizás te interese:

• Hacer una cuenta regresiva hacia una fecha
• Mostrar el tiempo como titulo en la pestaña del explorador
• Insertar redirección a otro sitio según la hora
• Insertar imagen en el sitio según la hora
• Insertar texto en el sitio según la hora