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.
