久しぶりの投稿です。
今回はプログレスバーを実装してみました。
#ソース
では、いつもどおりソースを載せておきますね。
progress_practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プログレスバー 練習</title>
<script src="./js/progressbar.js"></script>
</head>
<body>
<div>
<!-- 進捗(%)を表示 -->
<input type="text" id="bar" value="0%" style="border-style: none" disabled="true">
<br>
<!-- プログレスバー -->
<progress id="myProgress" value="0" max="100" width="200px">0%</progress>
</div>
<!-- ボタンを押すと、プログレスバーが実行される -->
<input type="button" id="myButton" onclick="updateProgress()" value="start">
</body>
</html>
progress.js
var interval;
var val;
function updateProgress() {
val = 0;
document.getElementById("myButton").disabled = true;
// 50ミリ秒ごとに更新
interval = setInterval("updateVal()", 50);
}
function updateVal() {
// 進捗(%)を表示する
var bar = document.getElementById("bar");
bar.value = val + "%";
// 100%になるまで、バーを更新
if (val < 100) {
val += 1;
document.getElementById("myProgress").value = val;
document.getElementById("myProgress").innerText = val + "%";
// 100%になったら、バーが止まる
} else if (val == 100) {
clearInterval(interval);
document.getElementById("myButton").disabled = false;
}
}
#解説
まず、htmlからですね。
プログレスバーのタグはprogress要素となります。
次に、jsですね。
ポイントは2つです。
1つ目が、setInterval関数です。
この関数は一定間隔で、処理を実行します。
第一引数に、関数を入れます。
この関数に、処理を実装すれば、いいわけです。
第二引数には、時間を入れます。
指定した時間が経過すると、もう一度第一引数で指定した関数が実行されます。
2つ目に、clearInterval関数です
setIntervalを止めたいときに使うものです。
#参考
【JavaScript入門】setIntervalの使い方まとめ
＜progress要素＞ - タスクの進捗度 | HTMLのタグリファレンス