Michele Basso
a- a+

Inserire un countdown

Con questo DHTML possiamo inserire un countdown, con la possibilità di personalizzare il messaggio che comparirà nella data prefissata.

Per prima cosa, inseriamo questo codice all'interno del tag body, nel punto in cui vogliamo che compaia il countdown:

<script language= " JavaScript1.2 " >

/*
Dynamic countdown Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit http://www.dynamicdrive.com
*/


function setcountdown(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}

//////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////

//STEP 1: Configure the countdown-to date, in the format year, month, day:
setcountdown(2003,12,25)

//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectively
var occasion= " Christmas! " 
var message_on_occasion= " Merry Christmas! " 

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown area
var countdownwidth='480px'
var countdownheight='20px'
var countdownbgcolor='lightblue'
var opentags='<font face= " Verdana " ><small>'
var closetags='</small></font>'

//////////DO NOT EDIT PASS THIS LINE//////////////////

var montharray=new Array( " Jan " , " Feb " , " Mar " , " Apr " , " May " , " Jun " , " Jul " , " Aug " , " Sep " , " Oct " , " Nov " , " Dec " )
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility= " show " 
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById( " countdownie " ) : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id= " countdownie "  style= " width:'+countdownwidth+ '; background-color:'+countdownbgcolor+ ' " ></span>')

window.onload=start_countdown


function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+  "   "  +todayd+  " ,  "  +todayy+  "   "  +todayh+  " : "  +todaymin+  " : "  +todaysec
futurestring=montharray[mo-1]+  "   "  +da+  " ,  "  +yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+  " Occasion already passed!  "  +closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+  " Occasion already passed!  "  +closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+  "  days,  "  +dhour+  "  hours,  "  +dmin+  "  minutes, and  "  +dsec+  "  seconds left until  "  +occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+  "  days,  "  +dhour+  "  hours,  "  +dmin+  "  minutes, and  "  +dsec+  "  seconds left until  "  +occasion+closetags
}
setTimeout( " countdown() " ,1000)
}
</script>

<ilayer id= " countdownnsmain "  width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id= " countdownnssub "  width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>

Per cambiare la data e il messaggio, dobbiamo modificare questa porzione di codice:

setcountdown(2003,12,25) Qui dobbiamo impostare il giorno utilizzato per il countdown(AAAA,MM,GG).
var occasion= " Christmas! " Questo è il nome dell'evento che accadrà nel giorno da noi impostato
var message_on_occasion= " Merry Christmas! " Questo è il messaggio che comparirà quel giorno
var countdownwidth='480px' La larghezza del box che conterrà il countdown
var countdownheight='20px' L'altezza del box che conterrà il countdown
var countdownbgcolor='lightblue' Il colore del box che conterrà il countdown

Abbiamo finito. Lo script è compatibile con tutti i browser, per problemi relativi al suo utilizzo potete consultare il nostro forum di discussione.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?