Плагин CountTo.js автоматически рассчитывает число от указанного числа до заданного конечного с заданной скоростью. Рассчитывает в порядке возрастания или убывания.

Существует 2 способа использования этого плагина: 1-й это через data атрибуты html тега и 2й это не посредственно через jQuery функцию countTo().

Оба способа можно комбинировать, но способ с атрибутами иммет приоритет над coutTo() функцией.

data атрибуты

Рассмотрим пример когда параметры плагина задаются data атрибутами в html теге

1
2
3
4
5
<span class="timer" data-from="25" data-to="75"></span>

<script type="text/javascript"><!--
    $('.timer').countTo();
//--></script>

Вот еще более подробный пример демонстрирующий все возможности плагина используемые таким методом:

1
2
3
4
5
<span class="timer" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="50"></span>

<script type="text/javascript"><!--
    $('.timer').countTo();
//--></script>

JavaScript опции

Данный способ позволяет передавать значения через JavaScript функцию countTo():

1
2
3
4
5
<span class="timer"></span>

<script type="text/javascript"><!--
    $('.timer').countTo({from: 0, to: 500});
//--></script>

И более подробный пример демонстрирующий все возможности плагина используемые таким методом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<span class="timer"></span>

<script type="text/javascript"><!--
    $('.timer').countTo({
        from: 50,
        to: 2500,
        speed: 1000,
        refreshInterval: 50,
        formatter: function (value, options) {
            return value.toFixed(options.decimals);
        },
        onUpdate: function (value) {
            console.debug(this);
        },
        onComplete: function (value) {
            console.debug(this);
        }
    });
//--></script>

Опции

Полный список функций и атрибутов используемые в этом плагине:

from — начало отсчета счетчика, по умолчанию 0(его data атрибут data-from)

to — конечное значение счетчика, по умолчанию 100(его data атрибут data-to)

speed — время в течении которого счетчик будет работать, по умолчанию 1000 миллисекунд(его data атрибут data-speed)

refreshInterval — задержка в миллисекундах между каждым обновлением счетчика, по умолчанию 100 миллисекунд(его data атрибут data-refreshInterval)

formatter (value, options) — callback-функция задает формат вывода числа(по умолчанию кол-во знаков после запятой 0)

onUpdate (value) — callback-функция вызывается после каждой итерации когда счетчик обновился(по умолчанию не используется)

onComplete (value) — callback-функция срабатывает при финальном подсчета(по умолчанию не используется)

Возможно вас это заинтересует
comments powered by HyperComments