如何用数字取得进度

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

做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" /> 

Answer 2

这不是数学问题，而是脚本问题。

您必须告诉脚本1.5是100％。

我只向您的脚本添加了一行以更改显示的内部HTML。

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>