[英]how to make progress Bar with numbers
我有一個進度條,必須以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 + "%";
}
}
});
做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" />
這不是數學問題,而是腳本問題。
您必須告訴腳本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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.