jQuery - 让 div 每秒变宽答案

【问题标题】：jQuery - make div get wider every secondjQuery - 让 div 每秒变宽
【发布时间】：2013-02-27 19:39:50
【问题描述】：

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

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

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

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

所以这意味着如果进度条需要 1 分钟（[max] = 1），则代码将起作用，因为除法后数字为1.67。但是，如果我将 max 设置为 15 分钟，它将不起作用 - 为什么？！

这是我的代码：（我添加了一些 cmets 以使其更容易）

<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>

请帮忙！

【问题讨论】：

最有可能出现舍入错误。尝试将所有进度值乘以 100，然后在最后一刻除以 100。
你不需要为你的英语道歉。我们可以很好地理解你。
我不明白我应该乘以什么... var 进度？

标签： javascript jquery timeout progress-bar

【解决方案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();

【讨论】：

【解决方案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读取。

【讨论】：