0

我正在使用 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({
    延迟：600，
    fx：“无”，
    向后：真实，
    速度：1，
    超时：60，
        自动停止：1，
    自动停止计数：0，
});

如何合并我的 HTML？p我必须手动输入的标签太多。

4

2 回答 2

2

您可以设置autostopCount要倒计时的项目数。因此，如果您从 100 开始并想在 5 停止，请设置autostopCount: 96. 因此公式为：stop = start - (difference - 1)。

您可以将任何内容传递var给您的.cycle()函数并以编程方式对其进行更改。

为避免输入 100 个p标签，只需使用for循环！

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

演示

于 2011-12-29T21:05:09.170 回答
1

这是一种整合 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 更改为更小的值。

于 2011-12-29T22:46:13.200 回答