纯JS progressBar简单模拟

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

jdkleo

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

阅读量458

点赞数

分类专栏： js 文章标签： progressbar

本文链接：https://blog.csdn.net/jdkleo/article/details/84474048

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图片，兼容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);
  };
}

jdkleo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JS progressBar简单模拟

效果图片，兼容IE FireFox Chromeprogressbar.html&lt;html&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=GB2312" /&gt;&lt;head&gt; &lt;title&gt;bar&lt;/title&gt; &l
复制链接

扫一扫

专栏目录