Mehrere Javascript Counter

[goloco]

Hallo.

Ich brauche auf meiner Seite mehrere Counter.
Ich möchte das ganze gerne schön mit DOM2 Eventhandlern usw haben.
Die Anzahl der Counter soll variabel sein. Je nachdem wieviele Angebote in der Datenbank stehen(welche unterschiedlich auslaufen), sollen diese angezeigt werden mit einem eigenen Counter.

Wie gehe ich da am besten vor?

[LX]

Was meinst Du mit "Counter"? Einen zeitlichen Countdown? Da solltest Du tatsächlich sicherstellen, dass die Clientzeit mit der Serverzeit abgeglichen wird. Eventhandler braucht es dafür nicht, lediglich ein Interval (dass per SetTimeout auf den Sekundenwechsel synchronisiert und ggf. nach n Sekunden neu angeglichen wird) und das Date-Objekt.

Idealerweise lädst Du dazu die Zeiten zusätzlich zu den Non-JS-Datumsangaben als Timestamp in Millisekunden und aktualisierst alle Anzeigen gleichzeitig. Zur Darstellung empfehle ich eine Berechnung über Division und Modulo.

An Deiner Stelle würde ich mehrstufig vorgehen:

1. einfaches Countdown-Script
2. Synchronisation
3. Mehrere Timer gleichzeitig bedienen

Gruß, LX

[goloco]

1. einfaches Countdown-Script

So eins? n ist ein Timestamp der aus der Datenbank kommt:

function countdown(n) {
  startDatum=new Date(); // Aktuelles Datum
   var zielDatum=new Date(n.getYear(),n.getMonth(),n.getDay(),n.getHours(),n.getMinutes(),n.getSeconds());

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
  if(startDatum<zielDatum)  {

var stunden=0, minuten=0, sekunden=0;  

// Stunden  
stunden=Math.floor((zielDatum-startDatum)/(60\*60\*1000));  
startDatum.setTime(startDatum.getTime()+stunden\*60\*60\*1000);  

// Minuten  
minuten=Math.floor((zielDatum-startDatum)/(60\*1000));  
startDatum.setTime(startDatum.getTime()+minuten\*60\*1000);  

// Sekunden  
sekunden=Math.floor((zielDatum-startDatum)/1000);  

print(stunden+':'+minuten+':'+sekunden);

setTimeout('countdown()',200);  

}
  // Anderenfalls alles auf Null setzen
else {
print('0:0:00');
   }
}

2. Synchronisation

und

3. Mehrere Timer gleichzeitig bedienen

weiter?

[LX]

var zielDatum=new Date(n.getYear(),n.getMonth(),n.getDay(),n.getHours(),n.getMinutes(),n.getSeconds());

Das geht einfacher: new Date(n);

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
  if(startDatum<zielDatum)  { (...)

Auch das geht einfacher:

var diffms = Math.max(0, zielDatum - startDatum),
    stunden = Math.floor(diffms/3600000),
    minuten = Math.floor((diffms/60000)%60),
    sekunden = Math.floor((diffms/1000)%60);

print(stunden+':'+minuten+':'+sekunden);

Dieses Statement ist mir in JS neu. Wahrscheinlich willst Du lieber die innerHTML-Eigenschaft des Timers (bzw. später der Timer) mit dem entsprechenden Inhalt füllen.

setTimeout('countdown()',200);

So oft ist das gar nicht nötig. Ein Mal pro Sekunde reicht, allerdings sollte dieses Mal mit dem Sekundenwechsel synchronisiert werden, d.h. Du startest das Script mit einem Timeout, der n ms wartet für n = 990 - (new Date()*1)%1000, also

// Wir können das auch gerne nachher noch objektorientiert kapseln, aber jetzt nehmen wir erst mal eine einfache Funktion:

function syncTimer() {
   if (window.timerInterval) { window.clearInterval(timerInterval); }
   window.setTimeout(runTimer, (990 - (new Date()*1)%1000));
}

Du solltest das Script sicherheitshalber alle 60 Minuten (3600 Sekunden) neu mit dem Sekundenwechsel synchronisieren.

Gruß, LX

[goloco]

Puh, vielen Dank ersteinmal!
Das Ganze sieht jetzt so aus:

function countdown(n) {  
	startDatum=new Date();  
	var zielDatum=new Date(n);  
	var diffms = Math.max(0, zielDatum - startDatum),  
	stunden = Math.floor(diffms/3600000),  
	minuten = Math.floor((diffms/60000)%60),  
	sekunden = Math.floor((diffms/1000)%60);  
	document.getElementById('counter').innerHTML=stundene+':'+minuten+' :'+sekunden;  
	var x=990 - (new Date()*1)%1000;  
	setTimeout('countdown()',x);  
}  
  
  
function syncTimer() {  
   if (window.timerInterval) { window.clearInterval(timerInterval); }  
   window.setTimeout(runTimer, (990 - (new Date()*1)%1000));  
}  
  
setTimeout('syncTimer()',3600);  

Objektorientiert brauche ich es nicht. Soviel JS habe ich nicht als das ich Übersichtlichkeit > Performance stellen müsste ;)

Lg, goloco