Обратный отсчет jQuery (чч: мм: сс) от исходного значения HTML - PullRequest
Новая
       12

Обратный отсчет jQuery (чч: мм: сс) от исходного значения HTML

0 голосов
/ 25 марта 2012

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

Значение будет просто текстовой строкой, проанализированной из PHP в формате чч: мм: сс.

Я нашел множество различных сценариев обратного отсчета, но они в основном для графического представления и работают с начальным значением, установленным исключительно в JS / jQ. 

<span class="countdown">11:55:12<span>

Я просто ищу простое решение для обратного отсчета до нуля с обратным вызовом некоторых видов, если это необходимо. Я пробовал множество скриптов, но просто не могу получить базовую текстовую функцию для нескольких элементов.

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 25 марта 2012

Есть несколько способов сделать это, но здесь есть простой метод функции jQuery ... 

 (function($){
   $.fn.extend({       
     startTimer:function(){

       // countdown elements    
       var _this = this;

       // for padding numbers with leading zero
       Number.prototype.pad=function(){
         return (this<10?'0':'')+this;
       }

       var computeAndDisplay=function(){
         //loop through countdown elements
         $(_this).each(function(){
           // get timestamp from ID attribute
           var timestamp = parseInt($(this).attr('id').split('_').pop())*1000;
           var differance = timestamp - new Date().getTime();
           var hours = 0;
           var minutes = 0;
           var seconds = 0;
           // if there is a positive difference
           if(differance > 0){
             //hours
             if(differance >= 3600000){
               hours = Math.floor(differance/3600000);
             }
             //minutes
             if(differance >= 60000){
               minutes = Math.floor(differance/60000)%60;
             }
             //seconds
             if(differance >= 0){
               seconds = Math.floor(differance/1000)%60;
             }
             $(this).html(hours.pad()+":"+minutes.pad()+":"+seconds.pad());
           }else{
             // if there is no positive difference, timer is done and you can
             // do whatever to that countdown element here
           }
         });
       };
       //start timer
       setInterval(computeAndDisplay,1000);
     }
   });
 })(jQuery);

Этот метод просто полагается на ОДНУ функцию setInterval, которая проходит через многочисленные обратные отсчеты, в отличие от использованияотдельный вызов setInterval для каждого экземпляра обратного отсчета.Однако при этом мы должны сохранить наше начальное значение метки времени в идентификаторе каждого элемента html, чтобы мы могли извлекать его каждый раз. 

<div class="countdown" id="cd_1_1332794014"></div>
<div class="countdown" id="cd_2_1332698014"></div>
<div class="countdown" id="cd_3_1332699014"></div>

Последний бит идентификатора - это метка времени unix из php,средняя часть не имеет отношения к функциональности, но существует для сохранения уникальности идентификаторов.

Чтобы запустить таймеры, достаточно просто позвонить ... 

$(document).ready(function(){
  $('.countdown').startTimer();
});
...