javascript 数学和 css 百分比

Question

I have a progress div container and an xhr request posting base64 images to the server.

The progress indicator div looks as follows:

<style>
.progresscover {
 background: #eee;
 width:100%;
 height: 3px;
 position: relative;
 text-align: left;
 }
 .progress{
 width:0%;
 height:100%;
 background: purple;
 position:absolute:
 left:0px;
 top:0px;
 bottom:0px;
  }
</style>
<div class="progresscover"><div class="progress"></div></div>

from the XHR request i get following values loaded: 102533, total: 703227 The loaded obviously changes till its equal to the total..

what is the math to increase the width of the "progress" bar incrementally in percentages?

Answer 1

its like this -- parseInt( (loaded / total * 100), 10) + '%');

Answer 2

Are you trying to achieve something like this?

 function percentage(num1,num2){ return (num1/num2) * 100 } get = () =>{ let value1 = document.getElementById('first').value; let value2 = document.getElementById('second').value; document.getElementById('res').innerHTML = `<h2>the percentage is:` + percentage(value1,value2) + `% </h2>`; document.getElementById('file').value = percentage(value1,value2) }

 .a{ margin-bottom: 30px; padding: 20px; }.one{ margin-bottom: 20px; }.two{ margin-bottom: 20px; }.res{ margin-bottom: 20px; } button { margin-bottom: 30px; background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 10px; margin: 4px 2px; cursor: pointer; }

 <div> <div class="a"> <div class="one">first Number:<input type="number" id="first"></div> <div class="two">second number:<input type="number" id="second"></div> <button onclick="get()">Get Percentage</button> </div> <div id="res"></div> <label for="file">Percentage:</label> <progress id="file" max="100" value=""> </progress> </div>