js实现自定义进度条效果


Posted in Javascript onMarch 15, 2017

效果图:

js实现自定义进度条效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Staged progress bar</title>
  <style type="text/css">
   *{margin:0;padding:0;}
   html,body{height:100%;}
   ul{list-style:none;}
   .cf:after{content:"";display:block;clear:both;height: 0;}
   #bar{height:20px;margin:100px 10px; margin-left: 50px}
   #bar div{float:left;position:relative;}
   #bar .staged, #bar .progress{border-color:#4CA8FF;}
   #bar .staged i{position:relative;overflow:hidden;display:block;width:inherit;height:inherit;}
   #bar .staged i:before{content:"";display:block;width:0;height:inherit;border-radius:50%;}
   #bar .progress {width:120px;height:inherit;margin-left:-4px;z-index:1;border-style:solid;border-width:2px 0;}
   #bar .progress:nth-child(2) i{border-left-width:2px;border-top-left-radius:6px;border-bottom-left-radius:6px;}
   #bar .progress:nth-child(2){border-left-width:2px;border-top-left-radius:10px;border-bottom-left-radius:10px;}
   #bar .progress:last-child{border-right-width:2px;border-top-right-radius:10px;border-bottom-right-radius:10px;}
   #bar .progress i{width:0;height:inherit;display:block;border-radius:0 10px 10px 0;position:relative;font-style:normal;}
   #bar .progress, #bar .staged{background:#7d7d7d;}
   #bar .sp i:before, #bar .progress i{background:#4CA8FF;}
   #bar .staged:not(:first-child){margin-left:-4px; }
   #bar .staged:before{position:absolute;content:attr(data-text);width:inherit;height:inherit;top:90%;left:0;}
   #bar .staged:after{content:attr(data-value);color:#fff;width:inherit;height:inherit;position:absolute;top:0;left:0;}
   #bar .sp i:before{width:100%;transition:width 1s;}
   .msg:before, .msg:after{display:block;position:absolute;border-style:solid;border-color:#ccc;background:#fff;top:30px;}
   .msg:before{content:attr(data-text);width:200px;height:40px;line-height:40px;font-size:12px;text-align:center;border-radius:4px;border-width:1px;top:-68px;left:calc(100% - 114px);}
   .msg:after{content:"";width:14px;height:14px;transform:rotate(45deg);border-width:0 1px 1px 0;top:-34px;left:calc(100% - 20px);}
  </style>
 </head>
 <body>
  <div id="bar" class="cf" data-value="8000" data-text="还有 [number] 点进度加载完成">
   <div class="staged sp" data-value="0" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="200" "><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="1000" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="5000" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="10000" ><i></i></div>
   <div class="progress"><i></i></div>
  </div>
  <script type="text/javascript">
   var progressBar = (function(){
    var $ = function(sele){
     return document.querySelectorAll(sele);
    }
    return function(a){
     var getValue = function(obj,attr){
      return Number(obj.getAttribute(a.value));
     }
     var box = $(a.box)[0];
     var value = getValue(box);
     var text = box.getAttribute(a.text);
     var staged = $(a.staged);
     var progress = $(a.progress);
     var i = 0, index = 0, num = 0, numV = 0, n = 1, af_index = 0, timeout = 0, stopAm = null;
     var af = function(fn){
      if(!requestAnimationFrame || !cancelAnimationFrame){
       clearTimeout(af_index);
       af_index = setTimeout(fn, 1000/60);
      }
      else{
       cancelAnimationFrame(af_index);
       af_index = requestAnimationFrame(fn);
      }
     }
     var setMsg = function(){
      var msg = progress[index];
      if(a.note){
        var arr = text.split(a.note);
        text = arr[0] + n + arr[1];
      }
      msg.setAttribute("data-text", text);
      msg.className = a.msg;
     }
     var animation = function(){
      if(i == 0){
       if(staged.length == index + 1){
        numV = value * 2;
       }
       else numV = getValue(staged[index + 1]);
       if(n == 0) {
        progress[index].style.width = "1%";
        return
       };
       if(n < 0 && staged.length > index + 1){
        n = numV - value;
        if(Number(progress[index].style.width.split("%")[0])<5) progress[index].style.width = "3%";
        setMsg();
        return;
       }
      }
      num = Math.ceil(++i * numV / 100);
      if(num > value){
       num = value;
       //console.log(num)
       n = numV - num;
       if(n > 0){
        if(staged.length > index + 1) setMsg();
        return;
       }
      }
      if(i == 100){
       staged[index + 1].className += " " + a.stagedProgress;
      }
      if(i > 105){ //105% 宽,自己根据样式调整。
       num = numV;
       index++;
       i = 0;
       timeout = setTimeout(function(){
        af(animation);
        clearTimeout(timeout);
       }, a.stagedSleep);
       return;
      }
      progress[index].style.width = i + "%";
      af(animation);
     }
     animation()
    }
   })();
   progressBar({
    box : "#bar",
    text : "data-text", // box 的属性
    note : "[number]", // box 的属性 (可以省略,计算好直接写入提示语句。);
    msg : "msg",
    staged : ".staged",
    progress : ".progress i",
    stagedProgress : "sp",
    value : "data-value",
    stagedSleep : "900",
    sleep : "3000"
   });
  </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
vue分页器组件编写方法详解
Jun 28 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
JS检测数组类型的方法小结
Mar 14 #Javascript
轻松理解JavaScript闭包
Mar 14 #Javascript
You might like
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
深入apache host的配置详解
2013/06/09 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python实现简单的计时器功能函数
2015/03/14 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
办公室岗位职责
2014/02/12 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
法律七进实施方案
2014/03/15 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书