How to set percentage in Javascript for my progress bar?

问题

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 ?

回答1:

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) + '%';

回答2:

Instead of this, you may try Query Loader.

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

You can see a demo here

来源：https://stackoverflow.com/questions/11588846/how-to-set-percentage-in-javascript-for-my-progress-bar

标签

javascript

progress-bar