js实现动态进度条详解

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

本章节分享一段代码实例,它实现了动态进度条效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#main{
  width: 100px;
  height: 30px;
  background: #ddd;
  overflow: hidden;
}
#progress{
  width: 1%;
  height: 30px;
  background: #aaf;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var bid=document.getElementById("bid");
  var progress=document.getElementById("progress");
  bid.onclick=function(){
    pro=0;
    speed=1;//速度
    sobj=setInterval(function(){
      pro+=speed;
      if(pro>=50){
        speed=5;//进度大于50%的时候加快速度
      }
      if(pro>=100){
        clearInterval(sobj);
      }
      progress.style.width=pro+'%';
    },100)
  }
}
</script>
</head>
<body>
<div id="main">
  <div id="progress"></div>
</div>
<button id="bid">查看演示</button>
</body>
</html>

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

一.代码注释:

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

(2).var bid=document.getElementById("bid"),获取id属性值为bid的元素对象。

(3).var progress=document.getElementById("progress"),获取id属性值为progress的元素对象。

(4).bid.onclick=function(){},为元素注册onclick事件处理函数。

(5).pro=0,声明一个变量并赋初值为0,后面会介绍它的作用。

(6).speed=1,声明一个变量并赋初值为1,后面会介绍它的作用。

(7).sobj=setInterval(function(){},100),每隔100毫秒执行一次回调函数。

(8).pro+=speed,pro表示已经进行的百分比 。(9).if(pro>=50){

  speed=5;

},如果大于等于50,那么就将速度设置为5,也就是定时器函数没执行一次,变化的尺寸是5px。

(10).if(pro>=100){

  clearInterval(sobj);

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

(11).progress.style.width=pro+'%',设置设置progress的宽度,也就是内部进度条的尺寸。

二.相关阅读:

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

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

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

js实现动态进度条详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容