0

首先，我得警告你，我的英文不太好……

好的，这是我的问题：我有一个基于百分比每秒变宽的进度条。

每一秒我都想增加1.67 / [max]百分比。[最大值] = 100%（需要多少分钟）。（如果[max] = 10- 进度条需要 10 分钟）

我的代码有效，但前提是数字（除法后）大于0.3（类似的东西）。

所以这意味着如果进度条需要 1 分钟 ( [max] = 1) 代码将起作用，因为数字是1.67在除法之后。但是，如果我将 max 设置为 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>

请帮忙 ！

4

2 回答 2

2

问题是你没有让宽度增长到足以改变 CSS 中的百分比，所以它保持不变（至少它看起来是这样的）。问题是，你并不真的需要所有这些。

这是您的代码的 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-27T20:20:58.483 回答
1

作为记录，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-27T20:21:28.490 回答