如何使用带有html css和javascript的空格对进度条进行编码

Question

我在下面有这个代码。但是在运行之后你会看到动画启动时出现问题。我希望它看起来不错：为第一个百分比着色，然后为另一个等等，直到80％。但现在你看到它是一团糟。请帮我解决一下这个。

我的代码：

function loadIt() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 80) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myElement {
  width: 100%;
  background: repeating-linear-gradient(to right, green, green 10%, 
transparent 10%, transparent 12%);
}

#myBar {
  width: 0%;
  height: 30px;
  background: repeating-linear-gradient(to right, grey, grey 10%, 
transparent 10%, transparent 12%);
}

<div id="myElement">
  <div id="myBar"></div>
</div>

<br>
<button onclick="loadIt()">Click ON</button> 

Answer 1

混乱是由以百分比给出的可变宽度的百分比计算的宽度引起的。在px中保留默认外部div CSS规则，并仅使用百分比更改内部div

function loadIt() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 80) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myElement {
  width: 100%;
  background: repeating-linear-gradient(to right, grey, grey 10px, 
transparent 10px, transparent 15px);
}

#myBar {
  width: 0%;
  height: 30px;
  background: repeating-linear-gradient(to right, green, green 10px, 
transparent 10px, transparent 15px);
}

<div id="myElement">
  <div id="myBar"></div>
</div>

<br>
<button onclick="loadIt()">Click ON</button>