在 HTML/JS 中制作 "CLI-like" 进度条

Question

所以我正在研究 Web 中的命令行界面。目前，在 CLI 的左侧有一个进度条的开始，还有一些可用的命令。我想添加更多命令，但我觉得他们需要有一个时间延迟功能才能让它感觉更真实。

我想做一个函数，当调用时，将场景中使用的 (ms) 除以 12（进度条中的破折号数）并每隔 (ms) 显示一次更新。

进度条看起来像这样：[------------]

function statsBar(ms){
  var timeChunk = Math.round(ms/12)
  for (let i = 0; i < timeChunk; i++) {
    document.getElementById("DispStatus").innerHTML = "[" + ("|" * timeChunk) + ("-" * (12 - timeChunk)) + "]"
    sleep(timeChunk);
  }
}

Answer 1

您可以使用 setTimeout 一次性安排对进度条的更新，但随着时间的推移进行更新。

function statsBar(ms){
  var timeChunk = Math.round(ms/12);
  for (let i = 0; i < 12; i++) {
    setTimeout(() => {
      document.getElementById("DispStatus").innerHTML = "[" + ('-'.repeat(i)) + "]";
    }, i * timeChunk);
  }
}
statsBar(6000);

<div id="DispStatus"></div>

Answer 2

好的。经过反复试验，我找到了完成 Rocky Sims 片段的最有效方法。 Rocky Sims 的代码创建了一个非常漂亮且高效的进度条，但是进度条的大小不一致。这个最终产品包括一个进度条，其宽度与 div 的宽度一致。感谢大家对此的帮助！

function statsBar(ms){
  var timeChunk = Math.round(ms/12);
  for (let i = 0; i <= 12; i++) {
    setTimeout(() => {
      document.getElementById("DispStatus").innerHTML = "[" + ('|'.repeat(i)) + ('-'.repeat(12 - i)) + "]";
    }, i * timeChunk);
  }
}
statsBar(6000);

<div id="DispStatus"></div>

在 HTML/JS 中制作 "CLI-like" 进度条

Making a "CLI-like" progress bar in HTML/JS

html

javascript

user-interface

command-line-interface

progress-bar