JavaScript数学和CSS百分比

发布于 2025-01-22 03:09:01 字数 537 浏览 2 评论 0原文

我有一个进度的DIV容器和一个XHR请求，将Base64图像发布到服务器上。

进度指标div的外观如下：

<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>

从XHR请求中，我得到以下值加载：102533，总计：703227 负载显然会变化直到其

总数等于总数。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃不饱 2025-01-29 03:09:01

像这样-Parseint（（加载 /总计 * 100），10） +'％'）;

回复收藏 0 原文

故人爱我别走 2025-01-29 03:09:01

您是否想实现这样的目标？

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>

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>

回复收藏 0 原文

~没有更多了~