Javascript jQuery-使div每秒变宽

首先，我必须警告你，我的英语不是很好

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

每秒钟我都要添加

1.67/[max]

百分比。 [max]=100%（需要多少分钟）。 （如果

[max]=10

-进度条将花费10分钟）

我的代码可以工作，但只有当数字（除法后）大于

0.3

（类似于此）

因此，这意味着如果进度条需要1分钟（

[max]=1

），代码将正常工作，因为除法后的数字是

1.67

。 但是如果我把最大值设为15分钟，那就不行了-为什么

这是我的代码：（我添加了一些注释以使其更简单）

函数updateProgress（）{
/*获取进度宽度（以百分比为单位）*/var Progress=（100*parseFloat（$（'arena_-bar'）.css（'Width'））/parseFloat（$（'arena_-bar'）.parent（）.css（'Width'））；
var corrent=进度；
var max=1；//一分钟
var add=1.67/最大值；
如果（进度<100）{
corrent+=加法；
$（“#arena_bar”）.css（“宽度”，corrent+“%”）；
setTimeout（updateProgress，1000）；//每秒更新一次
}
}
updateProgress（）；

---

请帮忙

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

你的代码，改为工作。我更改了时间延迟以使其运行更快，如果需要，可以将其更改回1000毫秒

以及守则：

HTML:

JS:

/*获取进度宽度（百分比）*/var corrent=（100*parseFloat（$（'arena'u bar'）.css（'Width'））/parseFloat（$（'arena'u bar'）.parent（）.css（'Width'））；
函数updateProgress（）{
var max=15；//一分钟
var add=1.67/最大值；
如果（相关系数<100）{
corrent+=加法；
$（“#arena_bar”）.css（“宽度”，corrent+“%”）；
setTimeout（updateProgress，50）；//每秒更新一次
}
}
updateProgress（）；

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

你的代码，改为工作。我更改了时间延迟以使其运行更快，如果需要，可以将其更改回1000毫秒

以及守则：

HTML:

JS:

/*获取进度宽度（百分比）*/var corrent=（100*parseFloat（$（'arena'u bar'）.css（'Width'））/parseFloat（$（'arena'u bar'）.parent（）.css（'Width'））；
函数updateProgress（）{
var max=15；//一分钟
var add=1.67/最大值；
如果（相关系数<100）{
corrent+=加法；
$（“#arena_bar”）.css（“宽度”，corrent+“%”）；
setTimeout（updateProgress，50）；//每秒更新一次
}
}
updateProgress（）；

对于记录，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();

函数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/最大值；
如果（进度<100）{
进度+=添加；
$（'.debug'）.html（'writed:'+progress+'%'）；
$（“#竞技场_栏”）.css（“宽度”，进度+“%”）；
setTimeout（updateProgress，1000）；//每秒更新一次
}
}
updateProgress（）；

正如您在下一个函数调用中读取值时所看到的，这些值存在差异。当写入值和读取值之间的差值超过未知极限时，不会出现问题。当他们靠得太近时，你的想法就行不通了

---

您需要将当前百分比保存在css之外，并且只向css写入，而不从css读取。

对于记录，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();

函数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/最大值；
如果（进度<100）{
进度+=添加；
$（'.debug'）.html（'writed:'+progress+'%'）；
$（“#竞技场_栏”）.css（“宽度”，进度+“%”）；
setTimeout（updateProgress，1000）；//每秒更新一次
}
}
updateProgress（）；

正如您在下一个函数调用中读取值时所看到的，这些值存在差异。当写入值和读取值之间的差值超过未知极限时，不会出现问题。当他们靠得太近时，你的想法就行不通了

---

您需要将当前百分比保存在css之外，并且只写入css，而不从css读取。

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

  /*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();

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();