進捗方法バー番号

Question

進捗バーが100％で終了していますが、この瞬間にこの進捗状況が表示されますが、この数値は1.5です（0.1、0,2、その上数まで - 1.5）と私は、この数

$(function() { 
    var x = document.getElementById("load"); 
    var width = 0; 
    x.innerHTML = width; 
    var int = setInterval(move, 20); 
     function move() { 
      if (width == 100) { 
       clearInterval(int); 
      } else { 
       width += 1; 
       x.style.width = width + "%"; 
       x.innerHTML = width + "%"; 
      } 
     } 
}); 

Answer 1

これは、あなたは1.5が100％であることをスクリプトに指示する必要があり、スクリプト1 ...

よりも多くの数学の問題です。

表示されるインナーHTMLを変更するために、スクリプトに1行だけ追加しました。

var showNumber = (1.5/100)*width; 
x.innerHTML = showNumber.toFixed(1); 

$(function() { 
 
    var x = document.getElementById("load"); 
 
    var width = 0; 
 
    x.innerHTML = width; 
 
    var int = setInterval(move, 200); // Setted a longer delay... 
 
    function move() { 
 
    if (width == 100) { 
 
     clearInterval(int); 
 
    } else { 
 
     width += 1; 
 
     x.style.width = width + "%"; 
 
     var showNumber = (1.5/100)*width; 
 
     x.innerHTML = showNumber.toFixed(1); // Only one decimal. 
 
    } 
 
    } 
 
});

#load{ 
 
    background-color:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="load"></div>

Answer 2

width/100を行うと、小数点以下の桁数を決定するためにtoFixed()を使用すると、プログレスバーをバインドする方法を知りません。

$(function() { 
 
    var x = document.getElementById("load"); 
 
    var width = 0; 
 
    x.innerHTML = width; 
 
    var int = setInterval(move, 20); 
 

 
    function move() { 
 
    if (width == 100) { 
 
     clearInterval(int); 
 
    } else { 
 
     width += 1; 
 
     x.style.width = width + "%"; 
 
     x.innerHTML = ((width/100).toFixed(1)) + "%"; 
 
    } 
 
    } 
 
});

#load { 
 
    position: fixed; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-size: 50px; 
 
    justify-content: flex-end; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="load" />