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 hacer una cuenta regresiva 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 2023. 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 Julio/2023)
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/2023 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 2023, como fecha de expiración, sería:
var strTargetDate = “12/25/2023 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 de la cuenta regresiva, 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 en tu sitio utilizas plataforma WordPress, puede que necesites recurrir al uso de un plugin para poder insertar este código. Te aconsejo que utilices el plugin Woody Snippets, el cual te ayudará a que puedas insertar códigos (lo encuentras en el repositorio de WordPress).
¡ No dudes en consultar haciendo un comentario, por si tienes una duda.!
Mira aquí otros post con etiqueta Según el tiempo
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.
Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.
Comparte tu enlace