Countdown-Timer mit Jquery oder Google App Engine?

Question

Ich brauche eine Countdown-Uhr, die die Tage, Stunden, Minuten und Sekunden zählt, die zu einem Datum meiner Wahl übrig sind, mit jquery oder Google App Engine (Python).

Ich habe einen Timer mit Javascript erstellt, aber ich habe Systemzeit verwendet.

Ich brauche Server time.Can jeder Körper geben mir Ideen, um einen Countdown-Timer mit Server UTC Zeit aufzubauen.

Answer 1

Ich habe einen Timer mit Javascript erstellt, aber ich habe Systemzeit verwendet.

Wenn dieses JavaScript wirklich Ihren Anforderungen entspricht, dann könnte dieser JavaScript-Code leicht auch dynamisch gemacht werden. Überall dort, wo die aktuelle Systemzeit initialisiert wird, fügen Sie einfach die Serverzeit in die Sprache Ihrer Wahl (Python) ein. Mit anderen Worten: Verwenden Sie Ihre Serversprache (Python), um das Skript genau so auszugeben, wie es gerade ist, außer dass Sie den Teil ersetzen, der die aktuelle Zeit initialisiert.

In PHP, einig Pseudo-Code (nicht sicher über die Argumente des Date() Konstruktor) aussehen könnte, zum Beispiel:

// my_countdown_script.php 
[..] 
var startTime = new Date(<?php echo time(); ?>); 
[..] 

Dann, anstatt mit Ihrem JavaScript, würden Sie die PHP einschließlich werden Datei, die die Serverzeit wie oben Einsätze:

<script type="text/javascript" src="my_countdown_script.php"></script> 

die gute Sache ist: Das wird in jedem Browser, der die JavaScript Sie bereits erstellt unterstützt.

(In einer späteren Version könnte Ihr JavaScript einige Initialisierer enthalten, mit denen Sie die aktuelle Zeit nach dem Einbinden der Bibliothek in Ihren HTML-Code festlegen können. Dadurch könnte die eigentliche JavaScript-Bibliothek statisch und somit zwischengespeichert werden Browser.)

Answer 2

warum nicht einfach die UTC-Methoden des Datumsobjekts verwenden?

sehen: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date

alle Ortszeit Methoden UTC Pendants

edit: dies mit seiner bestehenden Implementierung in Javascript werden soll verwendet.

Wenn Sie wirklich sicher sein möchten, dass Sie die Serverzeit erhalten, eine XHR Anfrage tun (für alles) und überprüfen Sie das Datum Header

Answer 3

Sie zuverlässig Serverzeit von http://just-the-time.appspot.com/ bekommen - eine App Engine App habe ich einem Fragesteller auf Stack-Overflow zu helfen, eigentlich ;-). Sein einfacher Code ist opensourced bei http://code.google.com/p/just-the-time/, und ich könnte leicht die Funktionalität addieren, die Sie benötigen (eine Seite, die mit dem zukünftigen Datum Ihrer Wahl abgefragt wird, gibt Tage, Stunden, Minuten und Sekunden dazu in einem leicht verwendbaren Format zurück) - Lass es mich wissen!

Answer 4

eine gute jQuery-Plugin hier http://keith-wood.name/countdown.html

alles, was Sie dann in Ihrem neuen Termine aus Ihrer Skriptsprache pHP/asp.net durch einen variable Einstellung auf der Seite, bevor das passieren wird tun müssen, ist Initialisierung und Aktualisierung der Funktion _calculatePeriods, um diese Variable anstelle der aktuellen zu verwenden.

<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/jquery.countdown.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var servernow = new Date(<?php echo time(); ?>); 
    var austDay = new Date(); 
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26); 
    $('#defaultCountdown').countdown({until: austDay}); 
    $('#year').text(austDay.getFullYear()); 
}); 


</script> 

von js/jquery.countdown.js

* Calculate the requested periods between now and the target time. 
    @param inst (object) the current settings for this instance 
    @param show (string[7]) flags indicating which periods are requested/required 
    @param now (Date) the current date and time 
    @return (number[7]) the current time periods (always positive) 
      by year, month, week, day, hour, minute, second */ 
_calculatePeriods: function(inst, show, now) { 
    // Find endpoints 
    inst._now = servernow; 

Josh

Answer 5

Also im Grunde brauchen Sie zwei Dinge:

1. Seite, die die Countdown-Zeit mit der Serverzeit anzeigt .
2. Clientseitige Aktualisierung der Uhrzeit.

Ihre Zeit Server-Seite in so etwas wie dieser Render:

<span id="countdown" title="1245515631554">4 min. and 24 seconds</span> 

Wo der Titel ein Zeitstempel der aktuellen Zeit, die Sie leicht analysieren können. Sie könnten den Text auch analysieren, aber das erfordert komplexeren Code.

Dann fügen Sie etwas Javascript hinzu, das die Zeit erhält und den Text jede Sekunde aktualisiert. Festlegen eines Zeitlimits, das das Datum abruft, es aktualisiert und den Text festlegt.

Answer 6

jQuery Timers ist ein Plugin, die ich in der Vergangenheit verwendet habe, und als sehr gut befunden.

Legen Sie einfach zwei JavaScript-Variablen auf die aktuelle und die Zielzeit für den Countdown fest und verwenden Sie einen jQuery-Timer, um die verbleibende Zeit zu aktualisieren. Wenn Sie möchten, können Sie ein anderes Mal hinzufügen, die die Server- und Client-mal neu synchronisiert auch, jeder so oft - obwohl dies wahrscheinlich nicht notwendig ist.