Está próxima una fecha importante y mediante un mensaje deseas hacer referencia del tiempo faltante hasta llegar a ella. Piensas en hacer una cuenta regresiva hasta esa fecha y deseas que tus visitantes se enteren de alguna manera.
El aniversario de creación de tu sitio, el día en que piensas realizar un sorteo o concurso, la navidad, fin de año, cualquier fecha puede ser importante y deseas destacar el tiempo que falta para celebrarla.
Para esto, puede ser que requieras un contador regresivo hasta la fecha que deseas citar. En un gadget de blogger u otro tipo de plataforma, puedes disponer un mensaje que haga referencia del tiempo que falta.
Como ejemplo, las líneas de código se han configurado, para que se estime el tiempo faltante para llegar al día de navidad 2022. Por lo tanto cuando visualices esta entrada, si ya ha pasado el tiempo desde la reedición de este post, es muy probable que ya haya pasado la fecha, sin embargo puedes editarlas según tus requerimientos.
(Reeditado en Enero/2022)
Cuenta regresiva
El código es el siguiente:
<!-- ======== Faltan # días para... ======== -->
<div style="background-color:#00ff00;color:#ff0000;font-size:14px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;padding:10px;border:10px;border-color:#55ff55;border-style:ridge;border-radius:7px;width:100%;" id="countdown" ></div>
<script>
var strTargetDate = "12/25/2022 00:00;
var strFormat = "Faltan...<br />$DAYS$ Días, $HOURS$ Horas, $MINUTES$ Minutos, $SECONDS$ Segundos. <br /> Para celebrar la Navidad";
var strExpired = "<span style='font-size:26px;font-weight:bold'>¡ FELIZ NAVIDAD !</span>";
function doCountDown(seconds)
{
if (seconds < 0)
{
document.getElementById("countdown").innerHTML = strExpired;
return;
}
var strMsg = strFormat;
strMsg = strMsg.replace("$DAYS$", ((Math.floor(seconds/86400))%100000).toString());
strMsg = strMsg.replace("$HOURS$", ((Math.floor(seconds/3600))%24).toString());
strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
strMsg = strMsg.replace("$SECONDS$", ((Math.floor(seconds))%60).toString());
document.getElementById("countdown").innerHTML = strMsg;
setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}
function initCountDown()
{
var dtTarget = new Date(strTargetDate);
var dtNow = new Date();
var dtDiff = new Date(dtTarget-dtNow);
var totalSeconds = Math.floor(dtDiff.valueOf()/1000);
doCountDown(totalSeconds);
}
initCountDown();
</script>
Personalizando
Recuerda que puedes definir atributos del <div> como el color de fondo, alineación y color de la fuente, ancho, borde, etc.
<div style="background-color:#00ff00;color:#ff0000;font-size:14px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;padding:10px;border:10px;border-color:#55ff55;border-style:ridge;border-radius:7px;width:100%;" id="countdown" ></div>
La fecha de expiración debes citarla en el formato mm/dd/aaaa (mes/día/año) y la hora debes citarla en formato de 24 horas ( 00:00 a 23:59 ).
Por ejemplo, para definir la fecha de navidad 2022, como fecha de expiración, sería:
var strTargetDate = "12/25/2022 00:00 "
Puedes editar la línea que hace referencia del tiempo faltante:
var strFormat = "Faltan...<br />$DAYS$ Días, $HOURS$ Horas, $MINUTES$ Minutos, $SECONDS$ Segundos. <br /> Para celebrar la Navidad";
De igual manera puedes eliminar las referencias de las horas, minutos o segundos:
var strFormat = "Faltan...<br />$DAYS$ Días, $HOURS$ Horas, $MINUTES$ Minutos, $SECONDS$ Segundos. <br /> Para celebrar la Navidad";
En la línea de mensaje por fecha de expiración puedes definir el estilo de la fuente y el mensaje:
var strExpired = "<span style='font-size:26px;font-weight: bold'>¡ FELIZ NAVIDAD !</span>";
👁 OJO: Cabe recalcar que tu servidor de hosting pueda no permitir que se ejecuten ciertos scripts, relacionados con el tiempo.
Si utilizas plataforma blogger no debe haber problemas o si tu servidor de hosting te permite incluir estos script, pruébalos con confianza.
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