Michele Basso
a- a+

Inserire un countdown

Con questo DHTML possiamo inserire un countdown, con lapossibilità di personalizzare il messaggio checomparirà nella data prefissata.

Per prima cosa, inseriamo questo codice all'interno deltag body, nel punto in cui vogliamo checompaia 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, respectivelyvar 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 areavar 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 " ) : countdowniecountdown()}if (document.all||document.getElementById)document.write('<span id= " countdownie "  style= " width:'+countdownwidth+ '; background-color:'+countdownbgcolor+ ' " ></span>')window.onload=start_countdownfunction countdown(){var today=new Date()var todayy=today.getYear()if (todayy < 1000)todayy+=1900var 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+  " : "  +todaysecfuturestring=montharray[mo-1]+  "   "  +da+  " ,  "  +yrdd=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 occasionif(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+closetagsreturn}//if passed day of occasionelse 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!  "  +closetagsreturn}//else, if not yetelse{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 modificarequesta porzione di codice:

setcountdown(2003,12,25) Qui dobbiamoimpostare il giorno utilizzato per ilcountdown(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 checomparirà quel giorno
var countdownwidth='480px' Lalarghezza del box che conterrà il countdown
var countdownheight='20px'L'altezza del box che conterrà il countdown
var countdownbgcolor='lightblue' Ilcolore del box che conterrà il countdown

Abbiamo finito. Lo script è compatibile con tutti ibrowser, per problemi relativi al suo utilizzo poteteconsultare il nostro forum didiscussione.



Ti potrebbe interessare anche

commenta la notizia