JavaScript implements refresh of the progress bar in the head of the web page-JS Tutorial-php.cn

JavaScript implements refresh of the progress bar in the head of the web page

巴扎黑

Release： 2017-04-17 10:44:06

Original

1739 people have browsed it

This article mainly introduces JavaScript to implement the example code of refreshing the progress bar of the web page header. It is very good and has reference value. Friends in need can refer to it.

The header will appear when refreshing the article, because it does not It is not really involved in the rendering process of whether the browser loading is complete, so it is just an appearance. It does not mean that the browser has finished loading all resources after the display is completed.

Rendering:

First look at the html:

Only two tags

<p id="barbg">
   <p id="bar">
   </p>
  </p>

Copy after login

CSS:

The layout is also very simple

 <style>
   *{margin:0;padding:0;}
   #barbg{height:5px; background:rgb(149,143,143)}
   #barbg p{width:0; height:5px; position:relative; background:rgb(230,10,10);}
  </style>

Copy after login

Then the native JS is like this

 <script>
   document.onreadystatechange = function(){
    var bar = document.getElementById(&#39;bar&#39;);
    var barbg = bar.parentNode;
    var wd = document.body.scrollWidth || document.documentElement.scrollWidth;
    var t = 10;
    var d = 0;
    var i = 0;
    var timer = setInterval(goto,10);
    function goto(){
     d = d + t ;
     bar.style.width = d + &#39;px&#39;;
     if(d >= wd){
      clearInterval(timer);
      bar.style.background = &#39;rgba(230,10,10,0)&#39;;
      none();
     }
    }
    function none(){
     var a = 10 - i;
     i++;
     if(a != 0 && a != 10){a = a * 0.1}
     if(a === 10){a = 1}
     if(a === 0){a = 0}
     barbg.style.background = &#39;rgba(230,10,10,&#39; + a + &#39;)&#39;;
     if(a === 0){barbg.style.display = &#39;none&#39;}
     if(a != 0){setTimeout(none,50);}
    }
   }
  </script>

Copy after login

The above is the detailed content of JavaScript implements refresh of the progress bar in the head of the web page. For more information, please follow other related articles on the PHP Chinese website!