Таймер обратного отсчета jQuery и PHP из форматированной переменной

Мне нужно создать таймер обратного отсчета в jquery, который заменяет html в теге span из переменной php, отформатированной в XX Days XX: XX: XX. Он должен загружать переменную при загрузке страницы, а затем, когда загружается скрипт jquery, он запускает обратный отсчет, но сохраняет тот же формат (XX Days XX: XX: XX) и в конечном итоге отображает «Expired» и останавливает обратный отсчет.

У меня запущен jsFiddle (http://jsfiddle.net/2SDdh/1/), но он показывает отформатированное время, а затем загружает 10-секундный обратный отсчет и в конечном итоге показывает «Просрочено». Кто-нибудь знает, как сделать правильное форматирование?

Мой вывод HTML через PHP

<span class="exp">10 Days 10:10:10</span>

Мой jQuery

$(function(){
  var count = 10;
  countdown = setInterval(function(){
    if (count > 0) {
      count--;
      $(".exp").html(count);
    } else {
      $(".exp").html('Expired');
    }
  }, 1000);
});

php variables jquery countdown countdowntimer
person MyWebsiteSpot    schedule 30.10.2012    source источник
comment
Вы можете установить значение счетчика как глобальную переменную, а затем просто уменьшить это значение, как только таймер сработает. Вы должны сделать: window.count = 10;, который вы можете определить в верхней части документа на document.ready(). Затем внутри таймера будет window.count--; Затем if(window.count == 0) вы просто остановите обратный отсчет. Хотя люди не рекомендуют использовать глобальные переменные, я не думаю, что было бы плохой идеей использовать одну из них для таймера.   -  person Ignacio Belhot Colistro    schedule 31.10.2012
comment
Вы можете добавить исходную метку времени в легко читаемый формат к атрибуту данных. Так было бы намного проще его захватить.   -  person Jørgen R    schedule 31.10.2012
comment
У меня сейчас счетчик останавливается с моими изменениями выше. Jurgemaister, сайт построен на CakePHP, и я не так хорошо с ним знаком. Любая идея, как я могу сделать это только с jQuery?   -  person MyWebsiteSpot    schedule 31.10.2012

Ответы (2)


arrow_upward
0
arrow_downward

попробуй это

HTML:

<span class="days">10</span> Days <br />
<span class="exp">23:59:59</span>​

JavaScript:

 $(function(){
    var days = 10;
    var count = 86399;
    var count2 = 0;
    var hour = 0;
    var min = 0;
    var sec = 0;

    countdown = setInterval(function() {
        if (days != 0 || count != 0) {
            if (count == 0) {
                days--;
                count = 86399;
            } else {
                count--;
            }
            count2 = count;
            hour = Math.floor(count2 / 3600);
            count2 = count2 % 3600;
            min = Math.floor(count2 / 60);
            count2 = count2 % 60;
            sec = count2;

            $(".exp").html(hour + ":" + min + ":" + sec);
            $(".days").html(days);
        } else {
            $(".exp").html('Expired');
        }
    }, 1000);
});​

Ваше здоровье!

person Lao    schedule 31.10.2012
comment
Работает идеально, спасибо! Вот обновленный jsFiddle в качестве доказательства... jsfiddle.net/2SDdh/24 - person MyWebsiteSpot; 05.02.2014

arrow_upward
0
arrow_downward

Почему бы не использовать собственный таймер обратного отсчета вместо того, чтобы использовать тот, который уже существует? . KK Countdown работает хорошо для меня.

person Marcus    schedule 30.10.2012