Cuenta regresiva hacia una fecha. ¿Cómo hacerla?

Cuenta regresiva hacia una fecha

Está próxima una fecha importante y mediante un mensaje deseas hacer referencia del tiempo faltante hasta llegar a ella. 

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 2018.  No obstante, puedes editarlas según tus requerimientos.

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 = "07/19/2018 18:46";
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>

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 2018, como fecha de expiración, sería:

var strTargetDate = "12/25/2018  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>";

¡ No dudes en consultar haciendo un comentario, por si tienes una duda.!

Quizás te interese:

• Mostrar fecha y hora en el sitio
• 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

Cabe recalcar que tu servidor de hosting pueda no permitir que se ejecuten ciertos scripts, relacionados con el tiempo.  Por esta razón, si tienes plataforma blogger o servidor de hosting que te permita incluir estos script, pruebalos con confianza.

Si utilizas plataforma wordpress puede convenirte el uso de un plugin.