Процент обратного отсчета - PullRequest
Новая
       16

Процент обратного отсчета

0 голосов
/ 30 декабря 2011

Я делаю обратный отсчет от 100% до 0%, используя jQuery или JavaScript. Я пытаюсь понять, как это сделать, и у меня есть контроль над тем, в каком проценте он останавливается. Пока что я собрал это с помощью плагина под названием jCycle, потому что я могу применить fx none, установить скорость и время ожидания, а также использовать autostop и autostopCount. Мне нужно, чтобы он быстро отсчитывал, но не уверен в лучшем способе.

Хотя я знаю, что это неуклюжий мой код ниже, надеюсь, поможет вам лучше понять, чего я пытаюсь достичь. Для примера я только что показал от 10% до 0%: 

<div id="counter">
   <p>1%</p>
   <p>2%</p>
   <p>3%</p>
   <p>4%</p>
   <p>5%</p>
   <p>6%</p>
   <p>7%</p>
   <p>8%</p>
   <p>9%</p>
   <p>10%</p>
</div>

$('#counter').cycle({
    delay: 600,
    fx:     'none',
    backwards: true,
    speed: 1,
    timeout:  60, 
        autostop: 1,
    autostopCount: 0,
});

Как я могу консолидировать мой HTML? Слишком много тегов p я должен набрать вручную.

Ответы [ 2 ]

2 голосов
/ 30 декабря 2011

Вы можете установить autostopCount, сколько предметов вы хотите отсчитывать.Поэтому, если вы начинаете с 100 и хотите остановиться на 5, установите autostopCount: 96.Формула выглядит следующим образом: stop = start - (difference - 1).

Вы можете передать любую var в вашу .cycle() функцию и изменить ее программно.

Чтобы избежать ввода 100 p тегов,просто используйте for петлю! 

for(i=1; i <= 100; i++) {
    $('#counter').append('<p>' + i + '%');
}

DEMO

1 голос
/ 30 декабря 2011

Вот способ консолидировать ваш html так, чтобы все, что вам нужно было: 

<div id="counter">
    <p><span>100</span>%</p>
</div>

Тогда jQuery будет выглядеть так: 

var stop = 6;

function decrease(){
    var percent = Number($('#counter span').text());
    if(percent > stop){
        $('#counter span').text(--percent);
        var t = setTimeout(decrease,1000);
    }
}
setTimeout(decrease,1000);

Я также сделал jsFiddle:http://jsfiddle.net/gS4Rr/1/

Если это не происходит достаточно быстро, смело меняйте 1000 на что-то меньшее.

...