如何使用纯JavaScript在给定时间内增加或减少进度条宽度？

我正在打字，我的键盘上有一个1秒的间隔函数 游戏已经开始了，但我需要一些在UI动画。它将在视觉上 向用户显示时间是如何用完的

在这段代码中，我想在7秒内将进度条从0%增加到100%。虽然我真的想减少

如何使用纯javascript实现这一点

时间安排在这里很重要，整个减少/增加过程应该在我给定的时间内完成 功能移动{ var elem=document.getElementByIdmyBar； var宽度=0； var id=setIntervalframe，1； //我想在7秒钟内完成 var时间=7000； 功能框架{ 如果宽度>=时间{ 清晰有效； }否则{ 宽度++； elem.style.width=100*宽度/时间+'%'； elem.innerHTML=Math.round100*宽度/时间+'%'； } } } 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：0%； 高度：30px； 背景色：4CAF50； 文本对齐：居中； 线高：30px； 颜色：白色； } 0% 开始 像这样

功能移动{ var elem=document.getElementByIdmyBar； var宽度=0； var id=setIntervalframe，1； //我想在7秒钟内完成 var时间=7000； 功能框架{ 如果宽度>=时间{ 清晰有效； }否则{ 宽度++； elem.style.width=100-100*宽度/时间+'%'； elem.innerHTML=100 Math.round100*宽度/时间+'%'； } } } 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：100%； 高度：30px； 背景色：4CAF50； 文本对齐：居中； 线高：30px； 颜色：白色； } 100% 开始 我建议首先使用requestAnimationFrame。接下来，使用计时器，而不是计算它被调用的次数。我做了一些小的调整，你可以用不同的号码呼叫，以获得不同的延迟

皇家空军文件：

函数移动延迟{ var elem=document.getElementByIdmyBar； var end=日期。现在+延迟； 变量帧==>{ var timeleft=Math.max0，end-Date.now； elem.style.width=100*timeleft/delay+'%'； elem.innerHTML=timeleft/1000.toFixed1+'s'； 如果timeleft==0，则返回； 请求动画框架； }; 请求动画框架； } 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：100%； 高度：30px； 背景色：4CAF50； 文本对齐：居中； 线高：30px； 颜色：白色； } 7.0秒 开始

---

你的问题不清楚。你的意思是你想降低门槛吗？是的，我想降低门槛，但我不知道问题出在哪里。要使其减小，只需执行elem.style.width=100-100*width/time+'%'；我希望整个减少过程将在7秒钟内完成建议：我认为将进度条的文本从百分比更改为秒和十分之一秒将对用户更有意义。例如，4.5秒。我希望整个下降过程将在7秒内发生。。。时间。。。这就是你所需要的，很好用，谢谢。请编辑它，将其从100%减少到0%，并将进度条的文本从百分比更改为秒。将其更改为秒（带1个小数点）并使其减少。是的，一切都很好，感谢您的帮助@Goblinlord