javascript - 如何用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>