progress とは
- ここで説明する progress とは次の語句からなるHTMLの要素です。
- progress
- 読み: プログレス
意味: 進歩、進行、向上、前進
progress 要素の概要
この要素は進歩状況を視覚的に表示するために使用します。
通常はタスクの進歩状況を表示するために使用されますが、 タスク以外でも進行してゆく値を視覚的に分かりやすく表示することにも利用できます。
この要素には、開始タグと終了タグが必要です。
<progress> </progress>
サンプルコードと実行結果
progress 要素は、進歩や進行といった進んでゆく数値を視覚的に表示するための要素です。
このサンプルでは開始ボタンがクリックされると秒数のカウントをしてprogress 要素と output 要素に出力するようにしました。 サンプルでは javascript を使用していますが、progress 要素の雰囲気をつかむためのコードですので、その部分の説明は割愛させていただきます。
なお、今回のサンプルはマークアップとしては間違った使い方ではないのですが、 meter 要素 でも表すことができます。
meter 要素は単位付きの実数値を視覚的に表すための要素です。 どちらかというと progress 要素は進歩値をパーセンテージ値で表すために使用することが主としての使い方であるとも解釈できるので、 使用する用途から、どちらの要素を選択するかは検討の余地があると言えます。
サンプルコード: HTML
<body>
<button id="idStart">開始</button>
<progress id="idProgress" max="5" value="0"></progress>
<output id="idOutput">経過秒数: ?秒</output>
<button id="idStop">停止</button>
</body>
サンプルコード: script
<script>
let varTimer;
let varElapsed;
let objStartTime;
let objNowTime;
let btnStart = document.getElementById("idStart");
let btnStop = document.getElementById("idStop");
let elmProgress = document.getElementById("idProgress");
let elmOutput = document.getElementById("idOutput");
btnStart.addEventListener("click",function(){
elmProgress.value = 0;
elmOutput.innerText = "経過秒数: 0秒";
objStartTime = new Date();
funStartTimer();
btnStart.disabled = true;
},false);
btnStop.addEventListener("click",function(){
funStopTimer();
btnStart.disabled = false;
},false);
function funStartTimer(){
varTimer = setInterval(funScreen, 1000);
}
function funStopTimer(){
clearInterval(varTimer);
}
function funScreen(){
objNowTime = new Date();
varElapsed = Math.floor((objNowTime - objStartTime) / 1000);
if(varElapsed < 6){
elmProgress.value = varElapsed;
elmOutput.innerText = "経過秒数: " + varElapsed + "秒";
}
else{
funStopTimer();
btnStart.disabled = false;
}
}
</script>