Таймер обратного отсчета с использованием jquery или google app engine?

Question

Мне нужно сделать часы обратного отсчета, которые отсчитывают дни, часы, минуты и секунды, оставленные до даты по моему выбору, используя jquery или google app engine (Python).

Я создал таймер, используя Javascript, но в этом я использовал системное время.

Мне нужно использовать серверное время. Может ли кто-нибудь дать мне идеи по созданию таймера обратного отсчета с использованием времени UTC сервера.

Answer 1

Я создал таймер, используя Javascript, но в этом я использовал системное время.

Если этот JavaScript действительно соответствует вашим потребностям, то этот код JavaScript также можно легко сделать динамическим. В коде, где бы ни инициализировалось текущее системное время, просто вставьте время вашего сервера, используя ваш язык (Python). Другими словами: используйте свой серверный язык (Python), чтобы вывести скрипт так, как он есть сейчас, за исключением замены части, которая инициализирует текущее время.

В PHP некоторый псевдокод (не уверенный в аргументах конструктора Date ()) может выглядеть, например:

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

Тогда вместо того, чтобы включать ваш JavaScript, вы бы включили PHP-файл, который вставляет время сервера, как указано выше:

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

Хорошая вещь: это будет работать в любом браузере, который поддерживает JavaScript, который вы уже создали.

(В некоторых более поздних версиях ваш JavaScript может включать некоторые инициализаторы, которые позволяют вам установить текущее время после включения библиотеки в ваш HTML. Это позволит статической библиотеке JavaScript быть статической и, следовательно, кэшироваться браузером. .)

Answer 2

хороший плагин jquery можно найти здесь http://keith -wood.name / countdown.html

все, что вам нужно сделать, это передать новую дату с вашего языка сценариев php / asp.net, установив переменную на странице перед инициализацией и обновив функцию _calculatePeriods, чтобы она взяла эту переменную вместо текущей.

<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>

из 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 3

Вы можете надежно получить серверное время от http://just -the-time.appspot.com / - приложения, которое я создал для помощи спрашивающему о переполнении стека, на самом деле ;-). Его простой код открывается по номеру http://code.google.com/p/just-the-time/,, и я мог бы легко добавить необходимую вам функциональность (страницу, которая запрашивает будущую дату по вашему выбору, возвращает дни, часы, минуты и секунды, в некоторых легко используемых формат) - просто дайте мне знать!

Answer 4

jQuery Timers - плагин, который я использовал в прошлом и который был признан очень хорошим.

Просто установите две переменные JavaScript в текущее и целевое время для обратного отсчета и используйте таймер jQuery для обновления «оставшегося времени». Если вы хотите, вы можете добавить другое время, которое синхронизирует время сервера и клиента, время от времени - хотя это, вероятно, и не нужно.

Answer 5

Итак, в основном вам нужны две вещи:

1. Страница, которая отображает время обратного отсчета с использованием времени сервера.
2. Обновление времени на стороне клиента.

Визуализируйте свою серверную часть времени примерно так:

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

Где заголовок - это отметка текущего времени, которую вы можете легко проанализировать. Вы также можете анализировать текст, но для этого требуется более сложный код.

Затем добавьте Javascript, который получает время и обновляет текст каждую секунду. Установка таймаута, который получает дату, обновляет ее и устанавливает текст.

Answer 6

почему бы просто не использовать методы UTC объекта даты?

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

все методы местного времени имеют аналоги UTC

edit: это предназначено для использования с его существующей реализацией в javascript.

Если вы действительно хотите быть уверены, что у вас есть серверное время, выполните XHR-запрос (для чего-либо) и проверьте заголовок Date