倒數百分比

我正在使用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

回答

相關問題