Scripts

Cuenta regresiva en javascript

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(https://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.
  • Tags: , , ,