所以我正在研究網路中的命令列界面。目前，在 CLI 的左側有一個進度條的開頭，以及一些有效的命令。我想添加更多命令，但我覺得他們需要有一個時間延遲功能才能讓它感覺更真實。
我想創建一個函式，當呼叫它時，將場景中使用的（ms）除以 12（進度條中的破折號數）并每隔（ms）顯示一次更新。
進度條看起來像這樣：[------------]
https://codepen.io/ZacV/pen/abEYpLz
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);
}
}
uj5u.com熱心網友回復：
您可以使用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>uj5u.com熱心網友回復：
行。經過一番反復試驗，我找到了完成 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463805.html
標籤：javascript html 用户界面 命令行界面 进度条