倒数百分比

Question

我正在使用jQuery或JavaScript从100％倒数到0％。我正在尝试解决如何做到这一点，并控制它停在哪个百分比。到目前为止，我已经使用名为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标签我必须手动键入。

Answer 1

您可以将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

Answer 2

这是巩固你的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更改为更小的值。