Javascript 从点创建进度条 多特先生{ 高度：5px； 宽度：5px； 背景色：#FAE089； 边界半径：50%； 显示：内联块； }

JSFiddle：

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

---

示例：从10秒开始倒数，并将圆点从黄色更改为灰色。如果计时器已启动，则所有点也应为灰色。

请不要嘲笑我的建议：

var指数=28；
setInterval（函数（）{
索引--；
document.getElementById（“自定义样式”）.innerHTML=“.dots.dot:n子项（-n+“+index+”）{背景色：#FF0；}”
}，1000）

.dot{
高度：5px；
宽度：5px；
背景色：#aaa；
边界半径：50%；
显示：内联块；
}

.dots.dot:n子元素（-n+28）{背景色：#FF0；}

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

在每次

setTimeout

之后，您希望再添加10秒。否则，所有点将同时改变颜色

$（此）

指的是您正在循环的特定

点

元素

<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;
}

---

您可以组合使用

delay（）

和

queue（）

使其工作。通过将元素的数量除以10秒，我们可以得到每个元素的延迟，然后将每个元素的延迟量除以这个量

//获取延迟间隔
变量计数=$（“#点跨度”）。长度；
var速度=10000/计数；
$（“#点跨度”）。每个（函数（索引）{
$（此）.延迟（速度*索引）.队列（函数（下一个）{
$（this.css（'background-color'，'gray'）；
next（）；
});
});
.dot{
高度：5px；
宽度：5px；
背景色：#FAE089；
边界半径：50%；
显示：内联块；
}
可以按如下方式执行

let countdown = 10000;

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

    countdown += 10000;
});

示例如下：

（我目前在手机上，似乎无法从中提取代码片段）

注：根据需要更改样式。使用
.css
不是最有效的方法，只是一个例子

另一个“完成闪光”的例子可以在这里看到
在我看来，最好也用JS创建点


var n=28；
var时间=10000；
var progress=document.querySelector（'.dots'）；
var dot=[]；
var计数器=n-1；
对于（变量i=0；i

.dot{
背景：黄色；
边界半径：50%；
显示：内联块；
高度：5px；
保证金：2倍；
宽度：5px；
}
这取决于您希望它看起来怎么样？您希望它看起来像一个进度条，从左到右从黄色变为灰色，还是希望所有点的颜色从黄色逐渐变为灰色？研究
setInterval（）
。您只需按元素索引的顺序向元素添加一个类即可。@imthenanchoman（从左到右）甚至不需要
setInterval（）
，因为您只需要10秒钟。这是一个一行程序。它添加了点击，而不是定时器/间隔：D它仍然没有倒退到greyThanks，似乎对我来说是一个解决方案。还有一个问题，如果我在站点5..4..3..2..1..0上显示计时器，一旦它达到0，点也应该全部“完成”。这样的事情可能吗？@LewisLarf是的，但我认为下一部分是由你来解决的。所有需要的代码都在那里（document、getElementById、HTML、innerHTML等等），您只需要调整它
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();