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

​