从点创建进度条

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>

Answer 2

请不要嘲笑我的建议：

    var index = 28;
    
    setInterval(function() {
      index--;
      document.getElementById("custom-style").innerHTML = ".dots .dot:nth-child(-n + " + index + "){background-color: #FF0;}"
    },1000)

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

    <style id='custom-style'>.dots .dot:nth-child(-n + 28){background-color: #FF0;}</style>

    <div class="dots">
    <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>
    </div>

Answer 3

你可以结合使用delay()和queue()来使其发挥作用。通过将元素数除以10秒，我们可以得到每个元素的延迟，然后将每个元素延迟该数量。

//Get delay interval
var count = $("#dots span").length;
var speed = 10000/count;
$("#dots span").each(function(index){
	$(this).delay(speed*index).queue(function(next){
  	$(this).css('background-color', 'gray');
    next();
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dots">
  <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>
</div>

Answer 4

如果您希望每个点在特定时间后逐渐改变颜色，请参阅下面的答案：

在每个setTimeout之后你想再增加10秒。否则所有点都会同时改变颜色。

$(this)指的是你正在循环的特定dot元素。

let countdown = 10000;

$(".dot").each(function(index){
    setTimeout(() => {
        $(this).css('background-color', '#ddd');
    }, countdown);

    countdown += 10000;
});

Answer 5

可以如下完成。

var amount = $(".dot").length;
var timer = amount/10*100;
var elementIndex = 0;

var progress = setInterval(function (){
var element = ".dot:eq(" + elementIndex + ")";
    $(element).css("background", "grey");
++elementIndex;
if(elementIndex > amount){
clearInterval(progress);
}
},timer);
progress();

示例：https://jsfiddle.net/9zr3kysz/3/

（我目前处于移动设备状态，似乎无法从中获取代码片段）。

PS。根据需要更改样式。使用.css不是最高效的方式，而只是一个例子。

另一个带有“完成闪光”的例子可以在这里看到https://jsfiddle.net/9zr3kysz/4/