countdown js su multioccorrenza

[Tonybho]

Ciao a tutti, ho un problema con un countdown scritto in javascript e che sto inserendo in un sito costruito per la maggior parte in php.
Non sapendo se il problema è su php o su javascript, ho azzardato il post in questa sezione, spero sia quella corretta....

Questo è il file .js che ho trovato in rete con le funzioni che costruiscono il countdown

function cdtime(container, targetdate)
{
	if (!document.getElementById || !document.getElementById(container)) return
	this.container=document.getElementById(container)
	this.currentTime=new Date()
	this.targetdate=new Date(targetdate)
	this.timesup=false
	this.updateTime()
}

cdtime.prototype.updateTime=function()
{
	var thisobj=this
	this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
	setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref)
{
	this.baseunit=baseunit
	this.formatresults=functionref
	this.showresults()
}

cdtime.prototype.showresults=function()
{
	var thisobj=this
	
	var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
	if (timediff<0)
	{ //if time is up
		this.timesup=true
		this.container.innerHTML=this.formatresults()
		return
	}

	var oneMinute=60 //minute unit in seconds
	var oneHour=60*60 //hour unit in seconds
	var oneDay=60*60*24 //day unit in seconds
	var dayfield=Math.floor(timediff/oneDay)
	var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
	var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
	var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
	if (this.baseunit=="ore")
	{ //if base unit is hours, set "hourfield" to be topmost level
		hourfield=dayfield*24+hourfield
		dayfield="n/a"
	}
	else if (this.baseunit=="minuti")
	{ //if base unit is minutes, set "minutefield" to be topmost level
		minutefield=dayfield*24*60+hourfield*60+minutefield
		dayfield=hourfield="n/a"
	}
	else if (this.baseunit=="secondi")
	{ //if base unit is seconds, set "secondfield" to be topmost level
		var secondfield=timediff
		dayfield=hourfield=minutefield="n/a"
	}
	this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
	setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults()
{
	if (this.timesup==false)
	{
		var displaystring="<span class='lcdstyle'><sup>Desiderio attivo ancora per</sup>
"+arguments[0]+" <sup>giorni</sup> "+arguments[1]+" <sup>ore</sup> "+arguments[2]+" <sup>minuti</sup> "+arguments[3]+" <sup>secondi</sup></span>"
	}
	else
	{
		var displaystring="<span class='lcdstyle'>Iscrizioni chiuse!</span>"
	}
	return displaystring
}

e questa è la porzione di codice php dove richiamo lo script, è tutto all'inteno di un ciclo while

echo '<div id="countdowncontainer" align="center" style="margin-bottom:20px"></div>';
echo '<script type="text/javascript">';
echo 'var futuredate=new cdtime("countdowncontainer", "December 2, 2011 16:52:00")';
echo 'futuredate.displaycountdown("giorni",formatresults)';
echo '</script>'; 

Il risultato è che mi visualizza il countdown solo sul primo record invece che su tutti.

P.S. Altra domanda....non essendo una cima in js come faccio a modificare il formato attuale del parametro della data? Vorrei semplicemente passare yyyy-mm-dd (formato memorizzato nel db)

Grazie mille.
Tony

[Tonybho]

Ho notato che anche su un altro javascript si comporta allo stesso modo.
Ho aggiunto un input con calendario popup nel mio ciclo e funziona solo sulla prima riga!!
E' un problema di lato client (Js) e lato server (PHP)?

Se sì...come posso risolvere??

Grazie

[lucavizzi]

Visualizza il countdown solo sul primo record perche alla funzione cdtime passi sempre lo stesso container "countdowncontainer".

echo '<div id="countdowncontainer" align="center" style="margin-bottom:20px"></div>';
echo 'var futuredate=new cdtime("countdowncontainer ", "December 2, 2011 16:52:00")';
echo 'futuredate.displaycountdown("giorni",formatresults)';

una soluzione potrebbe essere:

//fuori dal ciclo
$cont=0;
//fuori dal ciclo

//nel ciclo
$cont++;
echo '<div id="countdowncontainer'.$cont.'" align="center" style="margin-bottom:20px"></div>';
echo 'var futuredate'.$cont.'=new cdtime("countdowncontainer'.$cont.'", "December 2, 2011 16:52:00")';
echo 'futuredate'.$cont.'.displaycountdown("giorni",formatresults)';

Luca

[carlomarx]

Boh... secondo me puoi avere lo stesso identico effetto con un quarto del codice (ho preso spunto dal tuo codice, quindi il css è identico)...

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<script type="text/javascript">
var oClock = new (function() {
	var oClockDiv, nMillisecs;

	function updateClock() {
		var	nDiff = nMillisecs - Date.now(), bPositive = nDiff > 0, nDeltaT = Math.abs(nDiff),
			nY, nD, nH, nM,
			nS = Math.floor((nDeltaT - (nY = Math.floor(nDeltaT / 31536e6)) * 31536e6 - (nD = Math.floor((nDeltaT - nY * 31536e6) / 864e5)) * 864e5 - (nH = Math.floor((nDeltaT - nY * 31536e6 - nD * 864e5) / 36e5)) * 36e5 - (nM = Math.floor((nDeltaT - nY * 31536e6 - nD * 864e5 - nH * 36e5) / 6e4)) * 6e4) / 1e3);

		oClockDiv.innerHTML = "<span> " + (nY ? " " + nY + " <sup>years<\/sup>" : "") + (nY + nD ? " " + nD + " <sup>days<\/sup>" : "") + (nY + nD + nH ? " " + nH + " <sup>hours<\/sup>" : "") + (nY + nD + nH + nM ? " " + nM + " <sup>minutes<\/sup>" : "") + (nY + nD + nH + nM + nS ? " " + nS + " <sup>seconds<\/sup>" : "") + "<\/span>" + (bPositive ? " mancano alla tua data" : " sono passati dalla tua data");

	}

	this.init = function (sDate) {
		var aDatePar = sDate.split("-");
		nMillisecs = (new Date(parseFloat(aDatePar[0]), parseFloat(aDatePar[1]) - 1, parseFloat(aDatePar[2]))).getTime();
		oClockDiv = document.getElementById("clockDisplay");
		updateClock();
		setInterval(updateClock, 1000);
	};
})();

</script>
<style style="text/css">
#clockDisplay span {
	background-color: black;
	color: yellow;
	font: bold 18px MS Sans Serif;
	padding: 3px;
}

#clockDisplay span sup{
	font-size: 80%
}
</style>
</head>

<body onload="oClock.init('2010-12-12');">
<div id="clockDisplay"></div>
</body>
</html>

[carlomarx]

Ma forse così è più elegante…

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<script type="text/javascript">
var oCountdown = new (function() {
	var oCDDiv, nMillisecs, aCD = [0, 0, 0, 0, 0], aDisplay = ["years", "days", "hours", "minutes", "seconds"];

	function updateClock() {
		var	nDiff = nMillisecs - Date.now(), nDeltaT = Math.abs(nDiff), sClockText = "<span>",
			sFinalText = nDiff > 0 ? " mancano alla tua data" : " sono passati dalla tua data";

		aCD[4] = Math.floor((nDeltaT - (aCD[0] = Math.floor(nDeltaT / 31536e6)) * 31536e6 - (aCD[1] = Math.floor((nDeltaT - aCD[0] * 31536e6) / 864e5)) * 864e5 - (aCD[2] = Math.floor((nDeltaT - aCD[0] * 31536e6 - aCD[1] * 864e5) / 36e5)) * 36e5 - (aCD[3] = Math.floor((nDeltaT - aCD[0] * 31536e6 - aCD[1] * 864e5 - aCD[2] * 36e5) / 6e4)) * 6e4) / 1e3);

		for (var nDigit = 0, nExists = 0; nDigit < 5; nDigit++) {
			nExists += aCD[nDigit];
			if (nExists > 0) { sClockText += " " + aCD[nDigit] + " <sup>" + aDisplay[nDigit] + "<\/sup>"; }
		}

		oCDDiv.innerHTML = sClockText + "<\/span>" + sFinalText;

	}

	this.init = function (sDate) {
		var aDatePar = sDate.split("-");
		nMillisecs = (new Date(parseFloat(aDatePar[0]), parseFloat(aDatePar[1]) - 1, parseFloat(aDatePar[2]))).getTime();
		oCDDiv = document.getElementById("cdDisplay");
		updateClock();
		setInterval(updateClock, 1000);
	};
})();
</script>
<style style="text/css">
#cdDisplay span {
	background-color: black;
	color: yellow;
	font: bold 18px MS Sans Serif;
	padding: 3px;
}

#cdDisplay span sup {
	font-size: 80%;
}
</style>
</head>

<body onload="oCountdown.init('2015-12-12');">
<div id="cdDisplay"></div>
</body>

</html>

[Tonybho]

Ciao carlomarx, grazie per l'aiuto!

Voglio capire una cosa...lo script che hai messo nell'head lo gestisco in un js esterno che può tornare sempre utile...

Tu hai messo la chiamata allo script nell'evento onload del body.

Nel caso in cui volessi visualizzare il countdown su più record in un ciclo come devo modificarlo?

Con la risposta di lucavizzi ero riuscito a farlo funzionare con l'utilizzo del $count in questo modo:

$count++;
echo '<div id="countdowncontainer'.$count.'" align="center" style="margin-bottom:20px"></div>';
echo '<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer'.$count.'", "November 30, 2011 16:52:00")
futuredate.displaycountdown("giorni", formatresults)                                    
</script>'; 

ma come lo applico alla tua soluzione? Anche perché ho visto il risultato e in effetti è identico, in più riuscirei a gestire il formato della data in input in modo più semplice, no??

Grazie

[carlomarx]

Elimina l'onload e il div dal body e sostituisci con questo se usi il primo esempio:

echo '<div id="clockDisplay"></div>';
echo '<script type="text/javascript">';
echo 'oClock.init("[COLOR=purple][QUI LA TUA DATA][/COLOR]");';
echo '</script>'; 

oppure con questo se usi il secondo esempio:

echo '<div id="cdDisplay"></div>';
echo '<script type="text/javascript">';
echo 'oCountdown.init("[COLOR=purple][QUI LA TUA DATA][/COLOR]");';
echo '</script>'; 

[carlomarx]

Ti conviene usare il secondo esempio. Tieni presente che io non ho creato un evento nel caso in cui l'attesa giunga al termine...

[Tonybho]

Ciao carlomarx, ho appena finito di implementare il countdown da te suggerito..
Funziona alla grande!!

Sto provando ad implementare la parte che gestisce il termine d'attesa..
La stringa che viene visualizzata dovrebbe essere memorizzata in sFinalText, ma non riesco a capire come gestirla..

Se il termine d'attesa è scaduto vorrei che venisse visualizzato solo la scritta Iscrizioni chiuse.

Grazie per la disponibilità!

[Tonybho]

sFinalText = nDiff > 0 ? " mancano alla tua data" : " sono passati dalla tua data";

Praticamente, se ho capito bene nDiff contiene il tempo, che se è > 0 accoda il primo statement altrimenti il secondo...

Ok, a me servirebbe che nel secondo statement venisse visualizzata solo la scritta Iscrizioni chiuse, mentre nel primo statement mettere la scritta "Manca ancora" seguita dal contatore...