Countdown-Timer in jQuery

9

Ich baue eine Penny-Auktions-Site und bin mit Timern zum Teil gekommen (ich benutze symfony framework). Hier habe ich ein paar Fragen und Probleme.

Also, ich habe ungefähr 10 Produkte auf der Homepage, die ich zeigen muss. Alle von ihnen mit einem Countdown-Timer.

Damit die Zähler richtig funktionieren, habe ich Folgendes im Kopf:

  1. In der Aktion der Vorlage hole ich alle Produkte, die in einem Array angezeigt werden sollen, zusammen mit start_time und end_time. Im HTML wird jedes Produkt ein verstecktes div haben, das Sekunden bis zum Ende enthält ( end_time - start_time) .

  2. auf Dokument bereit, jQuery durchläuft alle Produkte auf der Homepage, konvertiert die verbleibende Zeit in das richtige Format ( hours:minutes:seconds ), Ausgabe dieser Zeit. Das ist der Teil, in dem ich verwirrt bin - sollte diese Funktion jetzt eine andere Funktion aufrufen, die die Zeit des div dekrementiert und ein setTimeout für 1 Sekunde hat?

  3. bei div.click, jQuery ruft das Sekunden-Div des Produkts ab, erhöht seinen Inhalt um 10. Wenn es überläuft, ändern Sie auch die Minuten und Sekunden auf den richtigen Wert. usw.

Eine meiner Sorgen ist, wie wird jQuery wissen, wie viele Produkte es auf der Webseite gibt? Ich verwende derzeit <body onload="func()"> , um die Timer auszulösen. Ich bin neu bei JavaScript / jQuery, also meine Frage ist, was ist eine andere, bessere Möglichkeit, die Timer auszulösen, und senden Sie auch die Anzahl der Produkte Argument zur jQuery-Funktion?

Wird das auch schnell und effektiv genug sein? Kann es besser gemacht werden?

    
Tool 27.06.2011, 11:56
quelle

1 Antwort

1

Wie in meinem Kommentar erwähnt, können Sie Ihre Produkte in einige divs mit einem classname setzen und dann jQuerys $.each('.classname') -Funktion verwenden, um über die Produkte zu iterieren

Nun zu Ihrem zweiten Punkt können Sie für jedes Produkt-Div eine separate Funktion mit Start-End-Zeit als Parameter aufrufen. hier ist ein Skript , um einen Countdown-Timer anzuzeigen.

Für Ihre dritte Frage können Sie ein verstecktes Feld erstellen, um die aktuelle Zeitangabe für jedes Produkt zu speichern. Wenn Sie auf jedes Produkt klicken, können Sie die Countdown-Funktion mit Ihrem neuen modifizierten Startwert aufrufen

Sie können $(".classname").size() verwenden, um die Gesamtzahl der Produkte zu ermitteln

    
anu 27.06.2011, 12:39
quelle

Tags und Links