使用setInterval添加到宽度

时间:2015-06-05 18:52:21

标签: javascript

每次调用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

3 个答案:

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