原生 js 实现一个有动画效果的进度条插件 progress_weixin_34221775的博客-程序员宝宝

技术标签: ViewUI  java  前端  后端  

效果图:

progress.gif

项目地址:https://github.com/biaochenxuying/progress

效果体验地址: https://biaochenxuying.github.io/progress/index.html

1. 原理

  • 一个用于装载进度条内容的 div (且叫做 container)。
  • 然后在 container 里面动态生成三个元素,一个是做为背景的 div (且叫做 progress),一个是做为显示进度的 div (且叫做 bar),还有一个是显示文字的 span (且叫做 text)。
  • progress 的宽为 100%,bar 的宽根据传入数值 target 的值来定( 默认为 0 ,全部占满的值为 100 ),text 展示的文字为 bar 的宽占 progress 宽的百分比。
  • bar 的宽从 0 逐渐增加到的 target 值的过程( 比如: 0 > 80 ),给这个过程添加一个逐渐加快的动画。

2. 代码实现

具体的过程请看代码:

/*
* author: https://github.com/biaochenxuying
*/

(function() {
  function Progress() {
    this.mountedId = null;
    this.target = 100;
    this.step = 1;
    this.color = '#333';
    this.fontSize = '18px';
    this.borderRadius = 0;
    this.backgroundColor = '#eee';
    this.barBackgroundColor = '#26a2ff';
  }

  Progress.prototype = {
    init: function(config) {
      if (!config.mountedId) {
        alert('请输入挂载节点的 id');
        return;
      }

      this.mountedId = config.mountedId;
      this.target = config.target || this.target;
      this.step = config.step || this.step;
      this.fontSize = config.fontSize || this.fontSize;
      this.color = config.color || this.color;
      this.borderRadius = config.borderRadius || this.borderRadius;
      this.backgroundColor = config.backgroundColor || this.backgroundColor;
      this.barBackgroundColor =
        config.barBackgroundColor || this.barBackgroundColor;

      var box = document.querySelector(this.mountedId);
      var width = box.offsetWidth;
      var height = box.offsetHeight;
      var progress = document.createElement('div');
      progress.style.position = 'absolute';
      progress.style.height = height + 'px';
      progress.style.width = width + 'px';
      progress.style.borderRadius = this.borderRadius;
      progress.style.backgroundColor = this.backgroundColor;

      var bar = document.createElement('div');
      bar.style.float = 'left';
      bar.style.height = '100%';
      bar.style.width = '0';
      bar.style.lineHeight = height + 'px';
      bar.style.textAlign = 'center';
      bar.style.borderRadius = this.borderRadius;
      bar.style.backgroundColor = this.barBackgroundColor;

      var text = document.createElement('span');
      text.style.position = 'absolute';
      text.style.top = '0';
      text.style.left = '0';
      text.style.height = height + 'px';
      text.style.lineHeight = height + 'px';
      text.style.fontSize = this.fontSize;
      text.style.color = this.color;

      progress.appendChild(bar);
      progress.appendChild(text);
      box.appendChild(progress);

      this.run(progress, bar, text, this.target, this.step);
    },
    /**
     * @name 执行动画
     * @param progress 底部的 dom 对象
     * @param bar 占比的 dom 对象
     * @param text 文字的 dom 对象
     * @param target 目标值( Number )
     * @param step 动画步长( Number )
     */
    run: function(progress, bar, text, target, step) {
      var self = this;
      ++step;
      var endRate = parseInt(target) - parseInt(bar.style.width);
      if (endRate <= step) {
        step = endRate;
      }
      var width = parseInt(bar.style.width);
      var endWidth = width + step + '%';
      bar.style.width = endWidth;
      text.innerHTML = endWidth;

      if (width >= 94) {
        text.style.left = '94%';
      } else {
        text.style.left = width + 1 + '%';
      }

      if (width === target) {
        clearTimeout(timeout);
        return;
      }
      var timeout = setTimeout(function() {
        self.run(progress, bar, text, target, step);
      }, 30);
    },
  };

  // 注册到 window 全局
  window.Progress = Progress;
})();

3. 使用方法

  var config = {
    mountedId: '#bar',
    target: 8,
    step: 1,
    color: 'green',
    fontSize: "20px",
    borderRadius: "5px",
    backgroundColor: '#eee',
    barBackgroundColor: 'red',
  };
  var p = new Progress();
  p.init(config);

4. 最后

  • 笔者的博客后花圆地址如下:

github :https://github.com/biaochenxuying/blog
个人网站 :http://biaochenxuying.cn/main.html

如果您觉得这篇文章不错或者对你有所帮助,请给个赞呗,你的点赞就是对我最大的鼓励,谢谢。

微信公众号: BiaoChenXuYing
分享 前端、后端开发等相关的技术文章,热点资源,随想随感,全栈程序员的成长之路。
关注公众号并回复 福利 便免费送你视频资源,绝对干货。
福利详情请点击: 免费资源分享--Python、Java、Linux、Go、node、vue、react、javaScript

BiaoChenXuYing

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34221775/article/details/88632207

智能推荐

求一个数的各个位数_超好的小白的博客-程序员宝宝_求各个位数

#include&lt;stdio.h&gt; //求一个数的各个位数 #include&lt;math.h&gt; //若要逆序输出,无前导0,可将各个位数存入数组 int main() //再反向读出 { int x,n; int i,a; scanf("%d",&amp;x); n=log10(x);//n+1为求出a为几位数 for(i=n;i&gt;=0;i--) { a=x/pow(10,i);//求出最高位 x=x-a*pow(10,i);//减去最高位

JSP学习_Bella_chene的博客-程序员宝宝

JSPjava server page:java服务器页面。与HTML的静态网页相比,JSP具有动态显示页面的功能。&lt;!-- 第一个JSP页面 --&gt;&lt;%@page import="java.util.Date"%&gt;&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;

android_驱动_qcom_【高通SDM660平台】(7) --- Camera onPreview 代码流程_专一的黄先生的博客-程序员宝宝

【高通SDM660平台】Camera onPreview 代码流程一、Camera onPreview 流程1. [ Framework ] Camera.jav...

FFmpeg 视频编码依赖包(x264)编译(iOS)_kangpp的博客-程序员宝宝

在对音频进行编码时,需要编译x264静态库。编译脚本文件在这里1、准备好脚本和x264源码2、执行编译文件 build_x264_iOS.sh命令行执行编译文件,提示我 Out of tree builds are impossible with config.h/x264_config.h in source dir.根据提示百度到的方法是:在x264文件中执行 configure...

我用 PyTorch 复现了 LeNet-5 神经网络(CIFAR10 数据集篇)!_红色石头Will的博客-程序员宝宝

大家好,我是红色石头!在上两篇文章:这可能是神经网络 LeNet-5 最详细的解释了!我用 PyTorch 复现了 LeNet-5 神经网络(MNIST 手写数据集篇)!详细介绍了卷积神经...

随便推点

05.Dubbo源码系列V1-Dubbo第五节-服务导出源码解析_youthlql的博客-程序员宝宝

文章目录第五节: Dubbo服务注册(导出)源码解析服务导出原理概述服务概念的演化服务导出思想确定服务的参数确定服务的参数概述确定服务的参数源码ServiceBeanServiceConfigAbstractInterfaceConfigConfigManagerAbstractConfigEnvironment确定服务支持的协议URL作用构造服务最终的URL开始服务注册相关过程公用源码ServiceConfig启动Netty,Tomcat等Server源码RegistryProtocolDubboProt

Android 源码分析 - 传感器 - Java层_Fighting Horse的博客-程序员宝宝

core/hardwarejni源代码位于:frameworks/base/core/jni/android_hardware_SensorManager.cppJNI代码调用SensorManager(libgui中,单例)获取传感器列表,建立事件连接(SensorEventQueue)Receiver将事件连接的文件句柄与SystemSensorManager传过来的MessageQueue绑定,并处理传感器事件,回调java层的BaseE...

unique去重函数_早睡身体好hh的博客-程序员宝宝_unique去重

unique函数是一个去重函数,去除相邻中的重复元素(只留一个)。其中,最关键的是:并不是删除并不是把重复的元素删除,而是全部放倒数组的后面。unique函数,返回的是去重后的尾地址。因为,unique只是去除相邻的重复元素,因此,为了去除重复的元素,应该,首先对数组/Vector进行排序,这样保证重复元素在相邻的位置。因此对于一个内容为 {2, 2, 5, 5, 6} 的vector...

Vue的学习笔记 ---- 015 使用ajax_诗水人间的博客-程序员宝宝

方式一:使用vue-resourcenpm install --sava vue-resourcemain.js 导入和使用import VueResource from 'vue-resource'Vue.use(VueResource) //给Vue对象添加$http属性 获得get()和post()方法代码:&lt;template&gt; &...

Bug中的中的小问题编程需要注意_weixin_30909575的博客-程序员宝宝

Bug中的中的小问题编程需要注意1. 关于局部变量与全局变量是否同名问题  如果参数传递的是一个数组,且全局变量与参数数据同名,则局部变量作用域中,这两个同名的数据可能会引起冲突。   如下:如果一开始是同名的数组名,在使用这个函数时,函数能够传递来,但是在数组之间复制失败????  改变形参名,后正常!!!    小结:  形参命名为: p_Name   全局变量...

apr apr-util 执行make命令时报错_p312011150的博客-程序员宝宝

关于网友提出的“apr apr-util 执行make命令时报错”问题疑问,本网通过在网上对“apr apr-util 执行make命令时报错”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:问题:apr apr-util 执行make命令时报错描述:解压完apr-util后,执行make报错,如下:[[email protected] apr-util-1.6.0]# makemake[1...

推荐文章

热门文章

相关标签