每次调用setInterval函数时,我都会尝试添加元素的宽度
function setProgress(){
var bar = document.getElementById('progress-bar');
var width = 20;
bar.style.width += width + 'px';
//console.log(bar.style.width);
}
window.onload = function(){
setInterval(setProgress, 10);
}
我尝试使用parseInt(),但每次我在console.log()窗口看到相同的宽度。我的最终目标是宽度增加20
答案 0 :(得分:2)
您需要从px
样式中删除width
部分,然后在递增之前将字符串转换为数字:
function setProgress(){
var bar = document.getElementById('progress-bar');
var width = 20;
bar.style.width = Number(bar.style.width.replace('px', '')) + width + 'px';
//console.log(bar.style.width);
}
答案 1 :(得分:1)
将width
设为全局var
,如下所示:
var width = 0;
function setProgress(){
var bar = document.getElementById('progress-bar');
width+= 20;
bar.style.width += width + 'px';
//console.log(bar.style.width);
}
window.onload = function(){setInterval(setProgress, 10);}
此外,您应指定最大宽度以防止进度条移动到工作区域之外(例如,修改增量线:if(width<500) {width+= 20;} else {return;}
)。
或者,您可以通过添加更多语句来使用原始解决方案,即:从样式属性bar.style.width
中删除“px”单元,然后解析它(转换为Number),然后递增它然后添加“px”(否则,“+”运算符将导致字符串串联,输出如:20px20px,20px20px20px等)。这种替代解决方案会减慢进程并对CPU施加额外负载(因此,不建议这样做)。
希望这可能会有所帮助。最好的问候,
答案 2 :(得分:0)
问题是width
返回一个包含单位的字符串。
相反,请考虑在变量中存储像素数:
var bar = document.getElementById('progress-bar'),
width = parseFloat(getComputedStyle(bar).width);
setInterval(function() {
width += 20;
bar.style.width = width + 'px';
}, 10);
var bar = document.getElementById('progress-bar'),
width = parseFloat(getComputedStyle(bar).width);
setInterval(function() {
width += 20;
bar.style.width = width + 'px';
}, 200);
#progress-bar {
background: #0f0;
display: inline-block;
}
<div id='progress-bar'>Progress bar</div>