2016-04-11 6 views
0

Я использую этот фрагмент jQuery для анимации счетчика чисел от 0 до числа, указанного в пролете. Может ли кто-нибудь показать мне, как изменить его, чтобы цифры подсчитывали DOWN до 0 при запуске с заданным значением?jQuery number counter

<span class="count">200</span> 

$('.count').each(function() { 
    $(this).prop('Counter', 0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text(Math.ceil(now)); 
     } 
    }); 
}); 
+0

Пространства не имеют свойства «Счетчик». Возможно, вы захотите изучить атрибуты данных. – j08691

+0

Возможный дубликат [jQuery анимированного счетчика чисел от нуля до значения] (http://stackoverflow.com/questions/23006516/jquery-animated-number-counter-from-zero-to-value) –

ответ

1

Нечто подобное? Я предполагаю, что «сейчас» в функции шага - только подсчет шагов.

$('.count').each(function() { 
    $(this).data('start', parseInt($(this).text())).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text($(this).data(start) - now); 
     } 
    }); 
}); 

Я проверил это работает в jsFiddle (https://jsfiddle.net/0mtht3xm/):

$('.count').each(function() { 
    $(this).data('start', parseInt($(this).text())).prop('Counter', 0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text($(this).data('start') - Math.ceil(now)); 
     } 
    }); 
}); 
+0

yep, вот что я был находясь в поиске. Спасибо. – noclist

0

Есть бесчисленное множество различных способов создать счетчик, который отсчитывает 0. Это просто, как я хотел бы сделать это:

HTML:

<span class="count">200</span> 

JS:

var $count = $('.count'); 

var num = parseInt($count.text()); 
var interval = window.setInterval(updateTime, 1000); 

function updateTime() { 
    num--; 
    $count.text(num.toString()); 
    if (num <= 0) { 
    window.clearInterval(interval); 
    } 
}