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:
ElectroSYSTEM
:) Hola, te invito a que te unas a este grupo, para Blogs y Bloggers.
No hay comentarios.:
👉🏻 Publicar un comentario