Question

首先，我要警告你，我的英语不太好......

好的，这是我的问题：我的进度条每秒都会根据百分比变宽。

我想每秒增加1.67 / [max]％。 [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>

请帮助！

Answer 1

问题在于你没有使宽度增长到足以使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();

Answer 2

为了记录，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中读取。

jQuery - 让div每秒都变宽

2 个答案: