js进度条的制作_js 视频进度条制作

作者：凡人多烦事01 | 2024-06-11 03:27:35

踩

js 视频进度条制作

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/701513