Javascript 带进度条的24小时倒计时计时器

我正在开发一个应用程序，帮助人们养成新习惯或抛弃旧习惯。对于这个应用程序，我想有一个倒计时计时器，每天都倒计时，多亏我让它工作，下一步是添加一个进度条，它与计时器一起倒计时（所以基本上00:00=完整进度条，23:59=空进度条）

我一直在到处找，但我似乎无法找到它，甚至无法开始。我希望看到目标时间减少

如果可能的话，我希望有人能给我一些指导/提示，甚至是一些片段！谢谢

（函数（）{
var开始=新日期；
start.setHours（24,0,0）；//hh:mm:ss
功能板（num）{
返回（“0”+parseInt（num））.substr（-2）；
}
函数tick（）{
var now=新日期；
如果（现在>开始）{//太晚了，就明天去吧
start.setDate（start.getDate（）+1）；
}
var剩余=（（立即开始）/1000）；
var hh=焊盘（（剩余/60/60）%60）；
var mm=焊盘（（剩余/60）%60）；
var ss=pad（保持为%60）；
document.getElementById（'time'）.innerHTML=hh+“：“+mm+”：“+ss；
设置超时（勾号，1000）；
}
document.addEventListener（'DOMContentLoaded'，勾选）；
})();
。目标进度{
边框颜色：黑色；
边框样式：实心；
边界宽度：厚；
高度：80px；
边缘顶部：50px；
左边距：20px；
右边距：20px；
背景色：黑色；
}
#时间{
浮动：对；
线高：80px；
右边距：20px；
背景色：黑色；
颜色：白色；
混合模式：差异化；
}
.目标时间容器{
高度：80px；
背景色：白色；
左边距：115px；
}
#进球时间{
背景色：黑色；
高度：80px；
宽度：100%；
}
要实现这一点，您可以使用
保持
变量中的秒数计算出一天中剩余秒数的百分比，
86400
，然后将该百分比设置为进度条的宽度：


（函数（）{
var开始=新日期；
start.setHours（24,0,0）；//hh:mm:ss
功能板（num）{
返回（“0”+parseInt（num））.substr（-2）；
}
函数tick（）{
var now=新日期；
如果（现在>开始）{//太晚了，就明天去吧
start.setDate（start.getDate（）+1）；
}
var剩余=（（立即开始）/1000）；
var hh=焊盘（（剩余/60/60）%60）；
var mm=焊盘（（剩余/60）%60）；
var ss=pad（保持为%60）；
document.getElementById（'time'）.innerHTML=hh+“：“+mm+”：“+ss；
//钢筋宽度计算：
var pc=剩余*（100/86400）；
document.querySelector（“#目标时间”）.style.width=pc+“%”；
设置超时（勾号，1000）；
}
document.addEventListener（'DOMContentLoaded'，勾选）；
})();
。目标进度{
边框：5px实心#000；
高度：80px；
保证金：50px20px20px0；
背景色：黑色；
}
#时间{
浮动：对；
线高：80px；
右边距：20px；
背景色：黑色；
颜色：白色；
混合模式：差异化；
}
.目标时间容器{
高度：80px；
背景色：白色；
左边距：115px；
}
#进球时间{
背景色：黑色；
高度：80px；
宽度：100%；
}

您可以使用getTime（）函数获取两个日期之间的毫秒差

乙二醇

let diff=new Date（“”.getTime（）-new Date（）.getTime（）；

您可以使用diff value设置progressbar样式（宽度、百分比或其他）。另一种解决方案是添加：

  const totalSeconds = 24 * 60 * 60;

紧接着：

start.setHours(24,0,0)

然后添加：

document.getElementById('goal-time').style.width = ((remain / totalSeconds) * 100) + '%';

紧接着：

document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;

计算进度条的宽度。
完美！非常感谢您的快速回复！没问题，很高兴能帮你一个标题“如何实现进度条”会更好。