如何在 Javascript 中为我的进度条设置百分比? [英] How to set percentage in Javascript for my progress bar?

问题描述

我对 Javascript 一无所知(我复制了进度条的代码，但没有显示百分比).我只需要在我的进度条中显示实际 % 的文本值(文本如:1%、2%、3%...).

我现有的代码如下(我不关心样式，所以我删除了它以更容易阅读代码):

<div id="进度条"><div id="进度"/><脚本>var loading = document.getElementById('loading');var progress = document.getElementById('progress');var progressbar = document.getElementById('progressbar');函数 updateProgress(){if (loading.style.display !== 'none'){var width = parseInt(progress.offsetWidth + ((progressbar.offsetWidth - progress.offsetWidth) * .15));if (width > (progressbar.offsetWidth * .95))宽度 = parseInt(progressbar.offsetWidth) * .5;progress.style.width = 宽度 + 'px';window.setTimeout("updateProgress()", 1000);}}document.body.style.margin = 0;document.body.style.padding = 0;loading.style.display = 'block';更新进度()；

您能帮我添加缺少的代码以显示已加载百分比的文本吗?

解决方案

https://developer.mozilla.org/en/DOM/element.innerHTML -- 这是设置元素内容的元素属性.

假设您的进度百分比定义为 var percent，您只需将内容设置为:

progress.innerHTML = percent.toFixed(1) + '%';

I do not know anything in Javascript (I have copied a code for a progress bar but it does not display the percentage). I just need to display the text value of the actual % inside my progress bar (a text such as : 1%, 2%, 3%...).

The existing code I have is the following (I do not care about the style, so I removed it to read the code easier) :

<div id="loading">
<div id="progressbar">
<div id="progress"/>

<script>
 var loading = document.getElementById('loading');
 var progress = document.getElementById('progress');
 var progressbar = document.getElementById('progressbar');

 function updateProgress() 
 {
   if (loading.style.display !== 'none')
   {
       var width = parseInt(progress.offsetWidth + ((progressbar.offsetWidth - progress.offsetWidth) * .15));

       if (width > (progressbar.offsetWidth * .95))
        width = parseInt(progressbar.offsetWidth) * .5;

       progress.style.width = width + 'px';
       window.setTimeout("updateProgress()", 1000);
    }
  }
 document.body.style.margin = 0;
 document.body.style.padding = 0;
 loading.style.display = 'block';
 updateProgress();
 </script>
</div>
</div>

Can you help me to add the missing code to display a text having the percentage already loaded please ?

解决方案

https://developer.mozilla.org/en/DOM/element.innerHTML -- this is the element property to set the content of an element.

Assuming your progress percentage is defined as var percent, you'll just need to set the content as such:

progress.innerHTML = percent.toFixed(1) + '%';

这篇关于如何在 Javascript 中为我的进度条设置百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！