プログレスバーを更新するためのJavaScriptの追加
プログレスバーを動的に更新するには、プログレスタグのvalue
属性を変更するためのJavaScriptを追加します。
HTMLファイルに次のJavaScriptコードを追加します。
<script>
let progressBar = document.getElementById("progress-bar");
let percent = 0;
function updateProgress() {
if (percent == 100) {
clearInterval(intervalId);
return;
}
progressBar.value = percent;
percent++;
}
let intervalId = setInterval(updateProgress, 100);
</script>
このコードでは、updateProgress()
という関数を作成しており、これが100ミリ秒ごとにプログレスバーの値を更新します。この関数は、プログレスバーが100%に達しているかどうかをチェックし、その場合はインターバルを停止します。
最後に、updateProgress()
関数と100ミリ秒の時間間隔を指定してsetInterval()
を呼び出すことでインターバルを設定します。
index.html
ファイルを保存し、ウェブブラウザで開きます。すると、時間の経過とともに値が増加し、100%に達するまでのプログレスバーが表示されるはずです。