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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
JS检测图片大小的实例
Aug 21 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
webpack手动配置React开发环境的步骤
Jul 02 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对称加密算法示例
2014/05/07 PHP
php实现的通用图片处理类
2015/03/24 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python中return如何写
2020/06/18 Python
python为什么要安装到c盘
2020/07/20 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
开学典礼策划方案
2014/05/28 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
56句经典英文座右铭
2019/08/09 职场文书