Question

我正在尝试增加进度条的填充量。我使用以下代码说，每当调用函数nxt()时，它会使div所占的百分比增加3.3％（例如：width为2.0％，则添加3.3％，得到5.3％）。我目前正在使用以下代码来尝试执行此操作：

document.getElementById("pb").style.width = 
`${document.getElementById("pb").style.width + 3.3}` ;

（带有id pb的div的宽度为0％）

但是，这不起作用。 document.getElementById("pb").style.width + 3.3输出0％3.3，当我尝试document.getElementById("pb").style.width + 3.3%时也没有输出。有人可以帮我弄清楚我如何获得想要的百分比吗？谢谢！

Answer 1

如果您要分配%，则style.width返回一个字符串，该字符串的末尾包含%。您需要去除%，以便获得数字百分比，向其添加一个数字，然后再次将其分配给width属性：

const pbStyle = document.getElementById("pb").style;
function increment() {
  const percentage = Number(pbStyle.width.slice(0, -1));
  const newPercentage = Math.min(percentage + 3.3, 100);
  pbStyle.width = `${newPercentage}%`;
  console.log(pbStyle.width);
  if (newPercentage < 100) setTimeout(increment, 100);
}
increment();

#pb {
  background-color: yellow;
}

<div id="pb">progress</div>

或者，您可以将当前百分比保留在变量中：

const pbStyle = document.getElementById("pb").style;
let percentage = 0;
function increment() {
  percentage = Math.min(percentage + 3.3, 100);
  pbStyle.width = `${percentage}%`;
  console.log(pbStyle.width);
  if (percentage < 100) setTimeout(increment, 100);
}
increment();

#pb {
  background-color: yellow;
}

<div id="pb">progress</div>

Answer 2

假设您说将宽度增加3.3％，则意味着将'pb'元素的宽度增加父元素的3.3％。

尝试一下：

document.getElementById("pb").style.width = 
    document.getElementById("pb").clientWidth + 
    0.033*document.getElementById('parent-div').clientWidth;

Answer 3

您首先需要获取进度条的宽度并将其乘以0.033，这将为您提供进度条的3.3％宽度。

改为执行此操作：

document.getElementById("pb").style.width =  (parseFloat(document.getElementById("pb").style.width) * 0.33 ) + parseFloat(document.getElementById("pb").style.width);

Answer 4

您显然是在串联您的值，而不是添加。正如您可以检入开发人员工具一样，语句document.getElementById("pb").style.width返回一个字符串。因此，您可以做的是：

var newWidth = parseFloat(document.getElementById("pb").style.width) + 3.3;
document.getElementById("pb").style.width = newWidth + '%';

Answer 5

将宽度解析为浮点数，然后添加所需的量：

document.getElementById("pb").style.width = (parseFloat(document.getElementById("pb").style.width) + 3.3) + '%';

如何在javascript中为百分比添加一个百分比？

5 个答案: