纯JS progressBar简单模拟

最新推荐文章于 2024-06-24 18:10:28 发布

原创最新推荐文章于 2024-06-24 18:10:28 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#progressbar

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单进度条动画，用于展示系统更新过程。通过随机数值模拟进度变化，结合定时器实现流畅的动画效果，并在更新完成后显示成功消息。

效果图片，兼容IE FireFox Chrome

运行效果

progressbar.html

<html>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
  <title>bar</title>
  <style>
   
   .barWidth{
      width:400px;
    }
		
   .bar{
      background-color:gray;     
      height:20px;
     
   }

   
   .bar0{
    background-color:blue;
    width:0px;
    height:20px;
   }

  .textBar{
    text-align:center;height:20px;line-height:20px;
    position:absolute;
  }
  
   
  </style>
<script src="bar.js"></script>
</head>


<body>

<div id="wq" class="bar barWidth">
<div id="nq" class="bar0"></div>
</div>
<div id="tx" class="textBar barWidth"></div>
<span id="zt">请点击start启动更新程序</span><br/><br/>
<input id="startbtn" type="button" value="start"/>

</body>
</html>

javascript bar.js

function $(id){
   return document.getElementById(id);
}
function getRandomNum(Min,Max)
{   
var Range = Max - Min;   
var Rand = Math.random();   
return(Min + Math.round(Rand * Range));   
}   
 function getTop(e){  
        var offset=e.offsetTop;  
        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);  
        return offset;  
        }  
function getLeft(e){  
        var offset=e.offsetLeft;  
        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);  
        return offset;  
}  
function clock(){
       var n = getRandomNum(1,5);
      var width = $("nq").offsetWidth;
      var len = width+n;
      if (len>wqLen){
         len = wqLen;
      }
      showBar(len);        
      if (len == wqLen){
	 $("zt").innerHTML="系统更新成功！";    
	 window.clearInterval(int);   
      }
 }
function showBar(len){
     $("nq").style.width = len +"px";
     var percent = parseInt(len/wqLen*100);
     $("tx").innerHTML =  percent +"%";
}
var int,wqLen;
window.onload = function(e){
   var wq = $("wq");
   wqLen = wq.offsetWidth;
   $("tx").style.top = getTop(wq)+"px";
   $("tx").style.left  = getLeft(wq)+"px";
  $("startbtn").onclick = function(){
      $("nq").style.width = 0 +"px";
      $("zt").innerHTML="正在更新系统，请稍候...";
      int=self.setInterval("clock()", 100);
  };
}