JavaScript百分比动态进度条

快乐打工仔 分类:实例代码

JavaScript百分比动态进度条属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了百分比动态进度条效果,实际应用通常需要和后台配合使用。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#progressBox{ 
  width: 300px; 
  height: 40px; 
  border: 1px solid #c8c8c8; 
  background: white;
  position: relative;
}
#progressBar{ 
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  height: 40px; 
  width: 100%; 
  line-height: 40px; 
  color: white; 
  text-align: center; 
  font-size: 20px; 
  font-weight: bold;
  font-family: Georgia; 
  clip: rect(0px,0px,40px,0px); 
  background: #00A1F5;
}
#progressText{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%; 
  height: 40px; 
  line-height: 40px; 
  color: black; 
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: Georgia;
}
</style>
<script>
window.onload = function () {
  var iNow = 0;
  var timer = setInterval(function (argument) {
    if (iNow == 100) {
      clearInterval(timer);
    } else {
      iNow += 1;
      progressFn(iNow);
    }
 
  }, 30);
 
  function progressFn(cent) {
    var oDiv1 = document.getElementById('progressBox');
    var oDiv2 = document.getElementById('progressBar');
    var oDiv3 = document.getElementById('progressText');
 
    var allWidth = parseInt(getStyle(oDiv1, 'width'));
 
    oDiv2.innerHTML = cent + '%';
    oDiv3.innerHTML = cent + '%';
    oDiv2.style.clip = 'rect(0px,' + cent / 100 * allWidth + 'px,40px,0px)';
 
    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle;
      }
      else {
        return getComputedStyle(obj, false);
      }
    }
  }
}       
</script>
</head>
<body>
  <div id="progressBox">
    <div id="progressBar">0%</div>
    <div id="progressText">0%</div>
  </div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var iNow = 0,声明一个变量并赋值为0,用来作为百分比的数字。

(3).var timer = setInterval(function (argument) {

  if (iNow == 100) {

    clearInterval(timer);

  } else {

    iNow += 1;

    progressFn(iNow);

  }

}, 30),一个定时器函数,每隔30毫秒执行一次指定函数。

如果iNow值等于100,那么就停止定时器函数的执行。

否则的话iNow值每次加1,并且调用progressFn(),从而实现动态百分比效果。

(4).function progressFn(cent) {},参数是一个数字。

(5).var oDiv1 = document.getElementById('progressBox');

var oDiv2 = document.getElementById('progressBar');

var oDiv3 = document.getElementById('progressText');

获取三个元素对象。

(6).var allWidth = parseInt(getStyle(oDiv1, 'width')),获取元素的width值。

(7).oDiv2.innerHTML = cent + '%',设置元素的内容,就是那个动态的百分比数字。

(8).oDiv3.innerHTML = cent + '%',之所以有和上面这么重复的一步,是因为,刚开始progressBar元素的宽度是0,没有覆盖progressText元素,但是随着progressBar元素宽度的增加,最终会覆盖掉progressText元素显示的百分比数字,两个同时设置就能保证无论何时都能够完整显示百分比数字。

(9).oDiv2.style.clip = 'rect(0px,' + cent / 100 * allWidth + 'px,40px,0px)',动态设置元素的click属性值。

(10).function getStyle(obj, attr) {},此方法可以获取元素指定的样式属性值。

二.相关阅读:

(1).setInterval()参阅setInterval()一章节。

(2).clearInterval()参阅clearInterval()一章节。

(3).parseInt()参阅javascript parseInt()一章节。

(4). innerHTML参阅innerHTML一章节。

(5).clip属性参阅CSS3 clip一章节。

(6).getStyle()参阅js如何获取非内部取样式表中定义的属性值一章节。

JavaScript百分比动态进度条,这样的场景在实际项目中还是用的比较多的,关于JavaScript百分比动态进度条就介绍到这了。

回复

我来回复
  • 暂无回复内容