【demo】原生js实现纯进度条

最新推荐文章于 2023-04-01 22:49:01 发布

阿庭

最新推荐文章于 2023-04-01 22:49:01 发布

阅读量334

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/weixin_43606809/article/details/96192896

版权

demo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

setTimeout

<html> 
<head> 
<title>进度条</title> 
  <style type="text/css">  
  .container{  
     width: 450px;  
     border: 1px solid #000;  
     height: 25px;  
   }
  #bar{  
     background: #000;  
     float: left; 
     height: 100%;  
     text-align: center;  
   }  
  </style>    
</head> 
<body> 
  <div class="container"> 
    <div id="bar" style="width:0%;"></div>  
  </div>  
  <span id="total"></span> 
</body> 
<script type="text/javascript">  
  function run(){  
    var bar = document.getElementById("bar"); 
    var total = document.getElementById("total"); 
    bar.style.width = parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      clearTimeout(timeout); 
      return;  //没有这行就一直加载超出100%
    } 
    var timeout = setTimeout("run()",100); 
  } 

  window.onload = function(){  
     run(); 
  }  
</script> 
</html>

在这里插入图片描述

setInterval

<html>  
<head>  
<title>进度条</title>  
<style type="text/css">  
.processcontainer{  
   width: 450px;  
   border: 1px solid #000;  
   height: 25px;  
   color: #fff;  
 } 
#processbar{  
   background: #000;  
   float: left; 
   height: 100%;  
   text-align: center;
 }  
</style>  

</head>  
<body>  
  <div class="processcontainer">  
   <div id="processbar" style="width:0%;"></div>  
  </div>  
</body>  
<script type="text/javascript">  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
    clearInterval(bartimer);  
  }  
 }  
var bartimer = setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
</script>  
</html>

在这里插入图片描述

阿庭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【demo】原生js实现纯进度条

setTimeout<html> <head> <title>进度条</title> <style type="text/css"> .container{ width: 450px; border: 1px solid #000; height: 25px; }...
复制链接

扫一扫