javascript - 从点创建进度条

Question

<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>

.dot {
  height: 5px;
  width: 5px;
  background-color: #FAE089;
  border-radius: 50%;
  display: inline-block;
}

JSFiddle:https://jsfiddle.net/duauvyrv/

我的问题是，通过改变颜色从这些点制作倒数计时器的最佳方法是什么？

示例:从 10 秒开始倒计时，并将圆点从黄色变为灰色。如果计时器已到，所有的点也应该是灰色的。

Answer 1

在我看来，最好也用 JS 创建点。

var n = 28;
var time = 10000;
var progress = document.querySelector('.dots');
var dot = [];
var counter = n - 1;

for (var i = 0; i < n; i++) {
  dot[i] = document.createElement('div');
  dot[i].classList.add('dot');
  progress.appendChild(dot[i]);
}

var go = setInterval(function() {
  if (!counter) clearInterval(go);
  dot[counter].style.background = 'gray';
  counter--;
}, time / n)

.dot {
  background: yellow;
  border-radius: 50%;
  display: inline-block;
  height: 5px;
  margin: 2px;
  width: 5px;
}

<div class="dots"></div>