Cuenta regresiva en javascript

Scripts Publicado por Claudia en diciembre 24, 2008

Hace unos días Amanda de BloggerBuster publicó en BloggingTips una plantilla llamada “Christmas Night“, con un script que me llamó mucho la atención, y que no incluía en el fichero comprimido para descargar. Eso me llevó a analizar la plantilla para poder utilizar el script.

El script, de JavaScript Kit, es un countdown (cuenta regresiva) que se muestra en forma de texto, y que podemos modificar para hacerlo más funcional y utilizarlo en cualquier fecha: Navidad, año nuevo, cumpleaños, etc.

Para utilizarlo, sólo es necesario copiar el texto en un nuevo widget (o gadget) de HTML javascript y listo. Podemos añadir un título a nuestro widget, o simplemente dejar el área en blanco.

Espero que sea útil!

Script original (en inglés)

Se vería algo así:

2 days left until Christmas (Dec 25)!

<script type="text/javascript">
 
/*
Annual Occasions Count Down script- By JavaScript Kit
For this and over 400+ free scripts, visit http://www.javascriptkit.com
This notice must stay intact
*/
 
var today=new Date()
 
//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 25)
 
//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="left until Christmas"
var onOccasiontext="Today is Christmas. Happy Holidays!"
 
var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion
 
var one_day=1000*60*60*24
var calculatediff=""
 
calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}
 
//Display message accordingly
var pluraldayornot=(calculatediff==1)? "day" : "days"
if (calculatediff>0)
	document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"!</b>")
else if (calculatediff==0)
	document.write("<b>"+onOccasiontext+" "+showdate+"!</b>")
 
</script>

Configuración básica del script

//Enter the occasion’s MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 25)

Determina la fecha de la cuenta regresiva, en números. En este caso, es 12,25 (Diciembre 25). Va siempre primero el mes, y luego el día.

//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText=”left until Christmas”
var onOccasiontext=”Today is Christmas. Happy Holidays!”

Determina el texto que queremos que se muestre antes del día y en el mismo día, respectivamente.

var monthtext=new Array(“Jan”,”Feb”,”Mar”,”April”,”May”,”June”,”July”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”)

Los nombres de los meses. Podemos mostrarlos en forma abreviada o completa.

var pluraldayornot=(calculatediff==1)? “day” : “days”

Singular y plural del texto que va a acompañar al número. Ejemplo, “día” : “días”.

Script en español

Hice una traducción al español del script, de acuerdo a lo que permiten mis conocimientos en javascript. Pueden descargarlo desde aquí en formato *.txt.

Para adornar la cuenta regresiva, también podemos agregar un estilo en HTML. Así, podemos poner una imagen que acompañe al texto, o cambiar el color y el tamaño del texto.

Ejemplo:

Aquí utilicé un icono de Iconspedia de 64×64 píxeles, alineado a la izquierda, con un texto de 16px en verde #284d22 (ver colores HTML).

CÓDIGO (modificar a gusto):

<div style="color: #284d22; font-size: 16px; padding-left: 68px; min-height: 64px; background: url(http://i362.photobucket.com/albums/oo63/girlyblogger/candy-cane-64x64.png) top left no-repeat;">
 
El-script-va-aquí
 
</div>

Más countdowns (Flash)

  • GraphicsArcade: Cuentas regresivas para Navidad, año nuevo y otras fechas, además de fondos, cursores, relojes y otros recursos interesantes.
  • Create your countdown: Crea tu propio contador flash para cualquier fecha, cambiando la imagen de fondo y personalizando el texto.
  • Compártelo!
    9 Comentarios en Cuenta regresiva en javascript
    1. magu dice:

      Hola!!!
      Quería agradecerte el trabajo que te tomaste para dejar todo ya listo para que lo usemos.
      Me fue de mucha utilidad y pude usar muy facilmente con tus instrucciones.
      Gracias otra vez
      un saludo
      magu

    2. andrescontilde dice:

      Gracias chica blogger… justo lo que necesitaba… me cayó como anillo al dedo este post.

    3. javierz dice:

      gracias!

    4. alfredo dice:

      Hola claudia te escribo aqui porque no encontre donde.

      Tengo una duda y quisiera saber si tu me puedas ayudar.

      veras quiero mostrar algun mensaje segun el navegador desde el cual se visita mi blog, quisiera que cuando alguien entre desde ie6, aparezca un mensaje diciendo que el blog no es compatible con ese navegador y poderle recomendar algun otro mediante algun link.

      Espero me puedas ayudar

      Saludos y gracias 😀

    5. David dice:

      Los meses los cuenta como q tienen 30 dias verdad?

    6. Mausarde dice:

      muchas pero muchisimas GRACIAS
      llevaba dias buscando esto
      muchas gracias por las instrucciones tan sencillas
      se nota que hay trabajo y dedicacion

      saludos

    7. the_whistle dice:

      Claudia, no hace falta decirte que haces un gran trabajo con tu blog, en verdad felicitaciones.

      Te comento que tengo una duda. El script ha funcionado perfecto, pero me crea dos lineas de texto que me gustaría quedasen centradas verticalmente con relación a la imagen que coloque a un costado, ¿Es posible realizar esto? ¿Cuales serían los códigos necesarios? Gracias de antemano.

    8. Torrecus dice:

      Que tal.

      Muchas gracias por tu código, me ha sido bastante útil.

    9. Torrecus dice:

      Por cierto, tu sitio (las entradas) me aparece con una fuente muy grande en Chrome, muy desproporcionada. En Opera no tengo ningún problema para verlo correctamente.

    Deja tu comentario
    Tu Comentario