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改为更小的东西。

百分比倒计时

2 个答案: