Javascript 如何在进度条结束后重置进度条

我找到了进度条的脚本。单击按钮后，它将从100%平稳运行到0%。 但是，在进度条到达0之后，如何重置进度条？我计划在幻灯片中使用此脚本，当它达到0后，它应该再次达到100%

希望你能帮我找到正确的方向

Thnx， 利昂

document.querySelector（“按钮”）.addEventListener（“单击”），（）=>{
document.querySelector（“.progress.bar”）.style.transitionDuration=“10s”；
document.querySelector（“.progress”）.className+=“complete”；
});
。进度{
宽度：50%；
高度：2米；
边框：1px纯黑；
}
.酒吧{
宽度：100%；
背景颜色：深蓝；
颜色：白色；
文本对齐：居中；
线高：2米；
过渡特性：宽度；
过渡时间函数：线性；
}
.progress.complete.bar{
宽度：0%；
}
钮扣{
边缘顶部：1米；
}

加载。。。
开始
您可以通过删除
complete
类来重置进度条


document.querySelector（“button.start”）.addEventListener（“单击”，（）=>{
document.querySelector（“.progress.bar”）.style.transitionDuration=“10s”；
document.querySelector（“.progress”）.className+=“complete”；
});
document.querySelector（“button.reset”）.addEventListener（“单击”，（）=>{
让className=document.querySelector（“.progress”）.className；
if（className.indexOf（'complete'）>-1）{
className=className.substr（0，className.indexOf（'complete'）；
document.querySelector（“.progress.bar”）.style.transitionDuration=“0s”；
document.querySelector（“.progress”）.className=className；
}
});
。进度{
宽度：50%；
高度：2米；
边框：1px纯黑；
}
.酒吧{
宽度：100%；
背景颜色：深蓝；
颜色：白色；
文本对齐：居中；
线高：2米；
过渡特性：宽度；
过渡时间函数：线性；
}
.progress.complete.bar{
宽度：0%；
}
钮扣{
边缘顶部：1米；
}

加载。。。
开始
重置
如果您想让它在没有任何用户交互的情况下是动态的，您可以在单击事件处理程序中使用setTimeout，将其设置为与animationDuration中使用的持续时间相同的持续时间，以重置转换并删除整个类


const start=document.querySelector（“开始”）
const progressBar=document.querySelector（“.progress.bar”）
const progress=document.querySelector（“.progress”）
函数resetProgressBar（）{
progressBar.style.transitionDuration=“10s”
progress.classList.add（“完成”）
设置超时（（）=>{
progress.classList.remove（“complete”）/对于选择器
.progress.bar
，请使用事件
转换的侦听器，因为您正在css中使用
转换
规则：

CSS转换完成后将触发transitionend事件

在此事件侦听器中，将transitionDuration设置为默认值。在下一步中，从
.progress
中删除类
complete
，这将返回进度条的上一个宽度


document.querySelector（“按钮”）.addEventListener（“单击”），（）=>{
document.querySelector（“.progress.bar”）.style.transitionDuration=“10s”；
document.querySelector（“.progress”）.className+=“complete”；
});
document.querySelector（“.progress.bar”）.addEventListener（“transitionend”，（）=>{
document.querySelector（“.progress.complete.bar”）.style.transitionDuration=“”；
document.querySelector（“progress”）.classList.remove（“complete”）；
})；
。进度{
宽度：50%；
高度：2米；
边框：1px纯黑；
}
.酒吧{
宽度：100%；
背景颜色：深蓝；
颜色：白色；
文本对齐：居中；
线高：2米；
过渡特性：宽度；
过渡时间函数：线性；
}
.progress.complete.bar{
宽度：0%；
}
钮扣{
边缘顶部：1米；
}

加载。。。
开始
谢谢你的建议。我已经在幻灯片脚本中实现了最后一个建议

它正在运行，换了幻灯片后会让人耳目一新。但在旅途中的某个地方它停了下来，我想它不知道什么时候启动进度条

有没有人能想出一个办法让这个更可靠

jQuery（'.owl carousel'）.owlCarousel({
项目：1，
保证金：0，
导航：错，
点：错，
幻灯片：1，
倒带：错误，
自动播放：对，
自动播放超时：5000，
自动播放速度：10000，
循环：对，
动画衰减：“衰减”，
回答：错，
mouseDrag:错，
触摸拖动：错误，
懒汉：2
});
jQuery（'.owl carousel'）.on（'changed.owl.carousel'，函数（事件）{
document.querySelector（“.progress.bar”）.style.transitionDuration=“5s”；
document.querySelector（“.progress”）.className+=“complete”；
})
document.querySelector（“.progress.bar”）.addEventListener（“transitionend”，（）=>{
document.querySelector（“.progress.complete.bar”）.style.transitionDuration=“5”；
document.querySelector（“progress”）.classList.remove（“complete”）；
});

。进度{
宽度：50%；
高度：2米；
边框：1px纯黑；
}
.酒吧{
宽度：100%；
背景颜色：深蓝；
颜色：白色；
文本对齐：居中；
线高：2米；
过渡特性：宽度；
过渡时间函数：线性；
}
.progress.complete.bar{
宽度：0%；
}
钮扣{
边缘顶部：1米；
}


加载。。。
开始
为什么要混合使用javascript和jquery？我认为缺乏经验…：-/