javascript - 如何解决这些问题

Question

我最近问如何使用进度条，没有人回答所以我做了一个自定义进度条，它完美但是 [ ] 扩展了每个新的增量，这是由于字体宽度吗？还是可以修复？我使用   因为它首先会扩展。

    <script type="text/javascript">
var imgsb = new Array("[/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[///&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[//////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[///////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[//////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[///////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[//////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[///////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[////////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[/////////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[//////////////////&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]","[///////////////////&nbsp;&nbsp;&nbsp;&nbsp;]","[////////////////////&nbsp;&nbsp;&nbsp;]","[/////////////////////&nbsp;&nbsp;]","[//////////////////////&nbsp;]","[///////////////////////]");
altb = new Array();
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
  if (currentAdb == imgCtb) {
    currentAdb = 0;
  }
document.getElementById('adLinkb').innerHTML = imgsb[currentAdb];
  currentAdb++;
}
  window.setInterval("cycleb()",500);
</script>
<div style="font-size:12px;color:#fff;font-family:monospace;" id="adLinkb">[/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</div>

Answer 1

看看这看起来有多干净:

var currentAdb = 0;
var imgCtb = 25;

function cycleb() {
  var output = '[';
  for (var i = 0; i < imgCtb; i++) {
    output += i > currentAdb ? '&nbsp;' : '/';
  }
  output += ']';
  document.getElementById('adLinkb').innerHTML = output;
  ++currentAdb;
  if(currentAdb == imgCtb) {
    window.clearInterval(myInterval);
  }
}
var myInterval = window.setInterval(cycleb, 500);

#adLinkb {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}

<div id="adLinkb"></div>