我正在尝试增加进度条的填充量。我使用以下代码说,每当调用函数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%
时也没有输出。有人可以帮我弄清楚我如何获得想要的百分比吗?谢谢!
答案 0 :(得分:3)
如果您要分配%
,则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>
答案 1 :(得分:1)
假设您说将宽度增加3.3%,则意味着将'pb'元素的宽度增加父元素的3.3%。
尝试一下:
document.getElementById("pb").style.width =
document.getElementById("pb").clientWidth +
0.033*document.getElementById('parent-div').clientWidth;
答案 2 :(得分:0)
您首先需要获取进度条的宽度并将其乘以0.033
,这将为您提供进度条的3.3%宽度。
改为执行此操作:
document.getElementById("pb").style.width = (parseFloat(document.getElementById("pb").style.width) * 0.33 ) + parseFloat(document.getElementById("pb").style.width);
答案 3 :(得分:0)
您显然是在串联您的值,而不是添加。正如您可以检入开发人员工具一样,语句document.getElementById("pb").style.width
返回一个字符串。因此,您可以做的是:
var newWidth = parseFloat(document.getElementById("pb").style.width) + 3.3;
document.getElementById("pb").style.width = newWidth + '%';
答案 4 :(得分:0)
将宽度解析为浮点数,然后添加所需的量:
document.getElementById("pb").style.width = (parseFloat(document.getElementById("pb").style.width) + 3.3) + '%';