倒数百分比

我正在使用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标签我必须手动键入。

来源

2011-12-29 tweedman23

我看到你是新手，所以一定要点击正确答案旁边的绿色复选标记。 – 2011-12-29 21:47:02

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

来源

2011-12-29 21:05:09

嗨，谢谢你的回复。当然，必须有合并这些代码的方法吗？这必须从100-0，所以用这种方法，我会看到柜台div内有100个p标签。另一种方法可能吗？ – tweedman23 2011-12-29 21:13:25

@ tweedman23啊，没有意识到这是你问题的一部分。添加。 – 2011-12-29 21:21:51

这是巩固你的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-29 22:46:13 Wasbazi

回答

相关问题