countdown

Come si fa a creare un countdown che continua fino a zero anche cambiando pagina, chiudendo la pagina, che non sia affetto da refresh?

Come ad esempio quello che c'è sul sito della formula 1
http://www.formula1.com/

Grazie.

[gve]

Un metodo in javascript puo` essere fargli fare la differenza fra l'orario/data attuale del pc e l'orario/data in cui il countdown dovrebbe segnare 0.

Il fatto che il countdown sia permanente indipendentemente dal caricamento/chiusura della pagina (che è ovviamente il primo requisito..) può esser senza dubbio garantito dal metodo suggerito da gve. Anzi non ne vedo granché di alternative.
Quindi basarsi su riferimenti temporali assoluti (la scadenza dell'evento) in confronto alla data corrente (che per sicurezza dovrebbe provenire dal server, altrimenti il conteggio potrebbe esser influenzato da una impostazione scorretta dell'orario sul pc del visitatore).
Conviene sempre lavorare con la differenza in millisecondi tra le due date.
Poi a parte i calcoli sulle date -sempre i soliti li trovi ovunque- per quel che riguarda la visualizzazione e il suo aggiornamento dinamico il metodo è sempre il solito:

var elemento = document.getElementById('idelemento'); //riferimento all'oggetto
elemento.innerHTML = "codice html aggiornato"; //modifica del suo codice al volo

Dove gli elementi con cui lavori sono degli <span> (o altro), ciascuno per ogni cifra del countdown.. o come vuoi.

Certo non è che tu abbia indicato di preciso come lo vorresti... visto che l'unico indizio è quello del sito della f1 allora potrai sicuramente prendere spunti dai loro script:
- per l'html iniziale del display del countdown guarda il loro sorgente html e cerca la sezione che inizia per
<span id="countdown" ...
alla fine di essa viene eseguita una funzione javascript per l'aggiornamento updateClock() che da inizio alle danze.

- il file javascript lo trovi a questo url:
http://www.formula1.com/js/countdown2006v10.js

Ti avverto però il codice è pessimo e molto dedicato alle loro esigenze, le tue non sono note.. quindi... vedi tu.

[astroluca]

Inserisci questo nella pagina dove vuoi che appaia il countdown:

<script>

var futureyear=2007
var futuremonth=0
var futureday=1
var displaytype="vediall"
var digitordate="isdate"
var aftercountdown="stopit"
var digitfrom=100
var digitto=0
var speed=1

var countdownid=new Array()
var futuredate
var nowdate
var resultoreraw
var resultore
var resultminutiraw
var resultminuti
var resultsecondiraw
var resultsecondi

var p_secondi
var p_minuti
var p_ore
var p_giorni

var resultsecondionly
var resultminutionly
var resultoreonly
var content

var i_countdown=-1
var countdownid

var step=1
speed*=1000

if (digitfrom>digitto) {step=-1}
if (digitfrom<digitto) {step=1}

var browserinfos=navigator.userAgent 
var ns4=document.layers
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  

function setfuturedate() {
	futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
	if (digitordate=="isdigit") {content=digitfrom-step	}
	docountdown()
}

function docountdown() {
	if (digitordate=="isdate") {
		calculateresults()
		formatresults()
		displayresults()
		setTimeout("docountdown()",speed)
	}
	else if (digitordate=="isdigit") {
		content+=step	
		displayresults()
		if (content==digitto) {
			setTimeout("happensafter()",speed)
		}
		else {
			setTimeout("docountdown()",speed)
		}
	}
}

function firstcountdown() {
	if (digitordate=="isdate") {
		futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
		calculateresults()
		formatresults()
	}
	else if (digitordate=="isdigit") {
		content=digitfrom
	}
}

function calculateresults() {
nowdate=new Date()
resultgiorniraw=(Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24
if (displaytype!="vediall") {
	resultsecondionly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000)
	resultminutionly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60)
	resultoreonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60)
}
else {
	resultgiorni=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24)
	resultoreraw=(resultgiorniraw-resultgiorni)*24
	resultore=Math.floor((resultgiorniraw-resultgiorni)*24)
	resultminutiraw=(resultoreraw-resultore)*60
	resultminuti=Math.floor((resultoreraw-resultore)*60)
	resultsecondiraw=(resultminutiraw-resultminuti)*60
	resultsecondi=Math.floor((resultminutiraw-resultminuti)*60)
	}
}

function formatresults() {
	if (displaytype=="vediall") {
		if (resultgiorni>1) {p_giorni="giorni"}
		else {p_giorni="day"}
		if (resultminuti<10) {resultminuti="0"+resultminuti}
		if (resultsecondi<10) {resultsecondi="0"+resultsecondi}
		content=resultgiorni+" "+p_giorni+" "+resultore+"h "+resultminuti+"m "+resultsecondi +"s"
	}
	else if (displaytype=="vedigiorni") {
		if (resultgiorni>1) {p_giorni="giorni"}
		else {p_giorni="day"}
		content=resultgiorni+" "+p_giorni
	}
	else if (displaytype=="vediore") {
		content=resultoreonly+" Ore"
	}
	else if (displaytype=="vediminuti") {
		content=resultminutionly+" min"
	}
	else if (displaytype=="vedisecondi") {
		content=resultsecondionly+" sec"
	}
}

function happensafter() {
	if (aftercountdown=="repeatit") {
		if (digitordate=="isdigit") {content=digitfrom-step}
		docountdown()
	}
	if (aftercountdown!="stopit" && aftercountdown!="repeatit") {
		document.location.href=aftercountdown
	}
}

function displayresults() {
	if (ie4) {
		for (i=0;i<=countdownid.length-1;i++) {
			var thisclock=eval(countdownid[i])
			thisclock.innerHTML=content
		}
	}
	else {
		for (i=0;i<=countdownid.length-1;i++) {
			document.getElementById(countdownid[i]).innerHTML=content
		}
	}
}

function setcountdown() {
	if (ns4 || ie4 || ie5 || ns6 || opera) {
		firstcountdown()
		i_countdown++
		countdownid[i_countdown]="countdown"+i_countdown
		document.write("<span id='"+countdownid[i_countdown]+"' style='position:relative'>"+content+"</span>")
	}
}

if (ie4 || ie5 || ns6 || opera) {
	onload=setfuturedate
}
</script>

Un esempio lo trovi su questa pagina che ho appena fatto: http://astroluca.altervista.org/vari...tdown2007.html

Ciaoo !!

Perfetto!
si può fare la stessa cosa con un countdown solo di 2 ore e 15 minuti?

Grazie


EDIT: Sono riuscito a modificare lo script integrandolo con php per fare in modo che il countdown non si riavviasse per un countdown dinamico (ossia 10 minuti dal momento in cui si carica la prima volta la pagina).

Dato che non conosco il javascript, potreste dirmi come fare aprire una data pagina nel momento in cui il countdown arriva a 0?

Grazie


FunCool: Non fare UP, usa il tasto Edita.

[funcool]

Non sono molto sicuro, ma credo che nella funzione calculateresults dovresti aggiungere dopo la prima riga queste righe:

if (Date.parse(futuredate)-Date.parse(nowdate)<=0)
    document.location="pagina2.htm";

Non sono molto sicuro, ma credo che nella funzione calculateresults dovresti aggiungere dopo la prima riga queste righe:

if (Date.parse(futuredate)-Date.parse(nowdate)<=0)
    document.location="pagina2.htm";

Ti ringrazio messo subito sotto la dichiarazione della funzione calculateresults funziona a dovere

[funcool]

Visto che risolto, chiudo.