js进度条的制作

最新推荐文章于 2023-11-09 11:24:12 发布

简学云资源平台

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量1k

点赞数

分类专栏： # Vue2和Vue3 文章标签： function div html

本文链接：https://blog.csdn.net/lixiaolin77/article/details/6957187

版权

Vue2和Vue3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html>
   <head>
       <title>js进度条的制作</title>
   </head>
   <body>
           <div style="width:300px;border:1px solid #CCC;height:25px;overflow: hidden;">
               <div id="progress_div" style="position: relative;left:0px;top:0px;height:25px;width:0px;background:blue"></div>
               <div style="position: relative;left:0px;top:-25px;font-size:12px;color:red;width:300px;line-height:25px;height:25px;text-align:center">
                   正在加载中，进度 <span id="progress_span_count">0</span>/10...
               </div>
           </div>

   </body>
</html>
<script>
   var m=0;
   function f_test(){
       if(m<11){
           if(m>0){
               f_changeDiv(m);
           }
           progress_span_count.innerHTML=m;
           setTimeout(function(){f_test()},1000);
           m++;
       }else{
           m=1;
           progress_div.style.width=0;
           f_test();
       }
   }

   var z=0;
   function f_changeDiv(m){
           if(z<30){
               progress_div.style.width=parseInt(progress_div.style.width.replace("px",""))+1;
               setTimeout(function(){f_changeDiv()},5);
               z++;
           }else{
               z=0;
           }
   }

   f_test();
</script>