Javascript Countdown für bestimmte Zeit und Datum

Ich benutze ein jQuery-Plugin, um den Countdown-Timer in meiner Webseite zu setzen. Zur Zeit der Code, was die Timer-Displays steuert, ist:Javascript Countdown für bestimmte Zeit und Datum

<script type="text/javascript"> 
    var clock = $('.clock').FlipClock(3600 * 24 * 3, { 
     clockFace: 'DailyCounter', 
     countdown: true 
    }); 
</script>

Die JS für das Plugin kann hier angesehen werden: https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js im Einsatz

Die Beispielseite des Codes kann hier gesehen werden: http://flipclockjs.com/faces/daily-counter

Derzeit ist der Timer ein Countdown für 3 Tage, der jedes Mal zurückgesetzt wird, wenn die Seite aktualisiert wird. Ich möchte eine benutzerdefinierte Zeit für den Countdown-Timer verwenden, die absolut ist (wird nicht mit Seitenaktualisierung zurückgesetzt). Ich möchte, dass das Datum am 30. September 2013 um 12:00 Uhr PST (US West - California Time Zone) ist.

Gibt es sowieso, dies mit Javascript oder jQuery zu tun?

Quelle

2013-08-25 Alex Zahir

Sie sind berechtigt, PHP-Code zu schreiben? –

nein .. nur Javascript –

die aktuelle Zeit importieren, und beachten Sie, dass dies die Zeit auf dem Computer des Benutzers Uhr eingestellt sein, was auch immer das zu, festgelegt ist und ein bestimmtes Datum festgelegt, dann die Differenz berechnen und dass für das Plugin verwenden:

var date = new Date(Date.UTC(2013, 8, 30, 12, 0, 0)); 
var now = new Date(); 
var diff = date.getTime()/1000 - now.getTime()/1000; 

var clock = $('.clock').FlipClock(diff, { 
    clockFace: 'DailyCounter', 
    countdown: true 
});

Für genaue Zeiten würde ich Ihren Webserver verwenden, um die aktuelle Zeit auszugeben.

Quelle

2013-08-25 22:08:17 adeneo

Und was sagt der TypeError? – adeneo

Ich sollte wahrscheinlich beachten, dass das Plugin, das Sie verknüpfen, heißt *** FlipClock *** und nicht *** FlipClip ***? – adeneo

Ja es ist Flipclock nicht FlipClip, aber leider funktioniert das nicht, wie auf http: //www.domainandseo.com/26/index.html gesehen .... die normale Version ist http://www.domainandseo.com/ 26/index1.html –

ich es auf diese Weise tun würde:

<script type="text/javascript"> 
    var clock = $('.clock').FlipClock(new Date(2013,8,30).getTime()/1000 - new Date().getTime()/1000, { 
     clockFace: 'DailyCounter', 
     countdown: true 
    }); 
</script>

Dies gilt hinunter bis zum Datum September, 30 2013 ... Ich kann es nicht versuchte noch so bin ich nicht sicher, ob es funktioniert.

Edit: Korrigierte das Datum neues Datum zu sein (2013,8,30) statt new Date (2013,9,30) als der Monat Zählung von 0 startet nicht 1.

Quelle

2013-08-25 22:12:40

das ist gut, aber das sagt eigentlich "64 Tage übrig" aber bis zum 30. September dort etwa 35 Tage bleiben. Also denke ich, dass etwas nicht stimmen sollte? –

Ja, du hast Recht. Es sollte neu sein Datum (2013,8,30). Geben Sie den gewünschten Monat ein - 1, da die Zählung der Monate zwischen 0 und 1 beginnt. Wahrscheinlich liegt es daran, dass die Differenz von einem bestimmten Datum, an dem der Monat Januar ist, gezählt wird. Wenn Sie also Januar darstellen möchten, müssen Sie 0 verwenden repräsentieren September, müssen Sie 8 verwenden. Ich habe die Antwort bearbeitet, um jetzt die richtige zu sein. –

oh ja, vielen Dank. Ich habe Ihrer Antwort ein Plus gegeben, aber die andere Antwort hat die gewählte Antwort, weil sie auch die Standardzeitzone auf UTC setzt, wie in der Frage gefordert. Nochmals vielen Dank :) –

ich bin asssuming Das erste Argument von .FlipClip() ist die Zeit bis zum Ende des Countdowns. Dieses Mal sollte "t" der Unterschied zwischen jetzt und der Zielzeit sein.

var t = targetTimeInMs - currentTimeInMs;

Um die aktuelle Uhrzeit zu erhalten, verwenden Sie den Konstruktor no-arg Date.

var currentTimeInMs = new Date().getTime();

Um die Zielzeit zu erhalten, geben Sie Datum mit Argumenten ein. Hier sind ein paar Beispiele von MDN:

var today = new Date(); 
var birthday = new Date("December 17, 1995 03:24:00"); 
var birthday = new Date(1995,11,17); 
var birthday = new Date(1995,11,17,3,24,0);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Ich bin mir nicht ganz sicher, ob Sie benötigen Millisekunden als erste arg auf Ihre .FlipClip() Funktion zu liefern. Konsultieren Sie die Dokumentation/Quelle dafür. Verwenden Sie dann die entsprechende Methode des Date-Objekts, um die erforderliche Einheit zu erhalten (Sekunden? Minuten? Stunden? Und verwenden Sie date.getSeconds(), getHours() usw., siehe MDN.)

Quelle

2013-08-25 22:18:56 Jackson

Javascript Countdown für bestimmte Zeit und Datum

Antwort

Verwandte Themen