jQuery的 - 讓DIV得到更廣泛的每一秒

首先，我要提醒你，我的英文不太好......jQuery的 - 讓DIV得到更廣泛的每一秒

OK，這裏是我的問題：我有一個進度條變得更寬，每第二基於百分比。

每秒鐘我想加1.67/[max]％。 [最大] = 100％（需要多少分鐘）。（如果[max] = 10 - 進度條將採取10分鐘）

我的代碼工作，但前提是（分割後）的數量是大於0.3（類似的東西）。

所以這意味着如果進度條需要1分鐘（[max] = 1）代碼將工作，因爲分割後的數字是1.67。但是，如果我最多15分鐘，它不會工作 - 爲什麼？！

這是我的代碼：（我加了一些意見，使其更容易）

<script> 
function updateProgress() { 
    /*Get Progress Width (in percents)*/ var progress = (100 * parseFloat($('#arena_bar').css('width'))/parseFloat($('#arena_bar').parent().css('width'))); 
    var corrent = progress; 
    var max = 1; // one minute 
    var add = 1.67/max; 

    if (progress < 100) { 
     corrent += add; 
     $("#arena_bar").css("width", corrent + "%"); 
     setTimeout(updateProgress, 1000); // update every second 
    } 
} 
updateProgress(); 
</script>

請幫助！

來源

2013-02-27 HtmHell

最可能的舍入誤差。嘗試將所有的進度值乘以100，然後在最後一刻除以100。 – jbabey 2013-02-27 19:42:01

我的想法確切。 – isherwood 2013-02-27 19:42:16

你不需要爲你的英語道歉。我們可以很好地理解你。 – DOK 2013-02-27 19:45:18

問題是，你沒有讓寬度增長到足以讓CSS在百分比變化，所以它保持不變（至少這是它的樣子）。事情是，你並不需要那麼多。

Here's a js fiddle您的代碼已更改爲可用。我改變了時間延遲使它運行得更快，如果你願意，你可以將它改回1000毫秒。

，代碼：

HTML：

<div style="width:400px; background-color:black"> 
<div id="arena_bar" style="background-color:navy; width:10px">&nbsp;</div> 
</div>

JS：

/*Get Progress Width (in percents)*/ var corrent = (100 * parseFloat($('#arena_bar').css('width'))/parseFloat($('#arena_bar').parent().css('width'))); 
function updateProgress() { 
    var max = 15; // one minute 
    var add = 1.67/max; 
    if (corrent < 100) { 
     corrent += add; 
     $("#arena_bar").css("width", corrent + "%"); 
     setTimeout(updateProgress, 50); // update every second 
    } 
} 
updateProgress();

來源

2013-02-27 20:20:58 TheZuck

這一個真的很好。這繼續增長。 – 2013-02-28 01:17:46

非常感謝！有用！ – HtmHell 2013-02-28 14:19:57

爲了記錄在案，jQuery是沒有設置你的計算寬度爲真正的百分比值，它使用它們設置像素值。

在這個例子中，你可以看到你的書面寬度和閱讀的寬度。

function updateProgress() { 
    var progress = (parseInt($('#arena_bar').css('width'))/parseInt($('#arena_bar').parent().css('width')))*100; 
    $('.progress').text('Read: ' + progress + ' %'); 

    var max = 1; 
    var add = 1.67/max; 

    if (progress < 100) { 
     progress += add; 
     $('.debug').html('Written: ' + progress + ' %'); 
     $("#arena_bar").css("width", progress + "%"); 
     setTimeout(updateProgress, 1000); // update every second 
    } 
} 
updateProgress();

http://jsfiddle.net/9PjqZ/1/

正如你可以看到有，當你在接下來的函數調用讀取它們的值的差異。當寫入值和讀取值之間的差異高於未知限制時，沒有問題。當他們彼此靠得太近時，你的想法就不會工作了。

您需要將當前的百分比保存到CSS以外，只寫入CSS但不能從CSS讀取。

來源

2013-02-27 20:21:28 dersvenhesse

哇真的不錯的選擇，它是與舊類型的主題。 – 2013-02-28 01:17:30

jQuery的 - 讓DIV得到更廣泛的每一秒

回答

相關問題