「HTML5」progress要素を使用して進捗状況を表示するサンプル

2022年6月28日

環境
Windows 10 Home 64bit
Google Chrome 103.0.5060.53（Official Build）

構文
$('#プログレスバー名’).attr(“value",値);
progress要素について
属性のmaxは完了した時の値です。
属性のvalueに数値を入れるとプログレスバーにその分色がつきます。

使用例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

完了進捗：<progress id="progressA" max="100" value="0">初期値</progress>

$(function() {

let num = 0;

$('#progressA').attr("value",num);

//更新ボタンをクリックしたら動作

$("#btnUpdate").click(function() {

//値を15増やす

num = num +15;

// 100以下の場合は値をvalue値にセット

if (num <= 100){

$('#progressA').attr("value",num);

}else{

//100を超えたら0にリセット

num = 0;

$('#progressA').attr("value",num);

}

});

</script>

</body>

</html>

<!DOCTYPE html> <html> <head> </head> <body> 完了進捗：<progress id="progressA" max="100" value="0">初期値</progress> <input type="button" id="btnUpdate" value="更新" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { let num = 0; $('#progressA').attr("value",num); //更新ボタンをクリックしたら動作 $("#btnUpdate").click(function() { //値を15増やす num = num +15; // 100以下の場合は値をvalue値にセット if (num <= 100){ $('#progressA').attr("value",num); }else{ //100を超えたら0にリセット num = 0; $('#progressA').attr("value",num); } }); }); </script> </body> </html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
完了進捗：<progress id="progressA" max="100" value="0">初期値</progress>
<input type="button" id="btnUpdate" value="更新" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
      let num = 0;
      $('#progressA').attr("value",num);

      //更新ボタンをクリックしたら動作
      $("#btnUpdate").click(function() {	
         //値を15増やす
            num = num +15;

        // 100以下の場合は値をvalue値にセット
            if (num <= 100){
                  $('#progressA').attr("value",num);

            }else{
          //100を超えたら0にリセット
                  num = 0;
                  $('#progressA').attr("value",num);
            }
      });
});
</script>

</body>
</html>

結果
「更新」ボタンを押すとプログレスバーに色がついていきます。
毎に15ずつ増えていきます。
値が100を超えたら0にリセットします

HTML5

Posted by arkgame