HTML 簡易 自動前進 進度條

按下按鈕時按鈕禁用,進度條開始每10毫秒前進1,到達100時停止,按鈕啟用

執行畫面:

程式碼:
<label>wait:</label>

<progress id="progress" max="100" value="0"></progress>

<button id="button" onclick="loadProgress()">Load</button>

<script type="text/javascript">
function loadProgress() {
const progress = document.getElementById('progress');
const button = document.getElementById('button');
progress.value = 0;
const interval = setInterval(() => {
progress.value += 1;
button.disabled = true;
if (progress.value >= 100) {
clearInterval(interval);
button.disabled = false;
}
}, 10);//單位: 毫秒
}
</script>
<!--Ruyut-->
Github Gist:

參考資料:

留言