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 se muestra a continuación, 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 y Hora en el sitio
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 más arriba de este post, puedes utilizar este código:
<div id="contenedor-fh" 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.
En el último código, el div con id="contenedor-fh", actúa como contenedor del div de fecha y el div de hora.👁 OJO: También recuerda que si no obtienes resultados, puede ser que el servidor de hosting que utilizas no permita la ejecución de este script, porque se relaciona con "tiempo" y tenga restricciones.
Sin embargo este código no presenta complicaciones si se ejecuta en Blogger. Además puedes insertarlo dentro de un gadget.
Si utilizas plataforma Wordpress puede convenirte el uso de un plugin.
¡ No dudes en consultar haciendo un comentario, por si tienes una duda.!
Quizás te interese:
No hay comentarios.:
👉 Publicar un comentario