当前位置:首页 > 技术文章 > 正文内容

自创插件简单易用的自创进度条插件

arlanguage1周前 (04-25)技术文章10

之前Rel_soul同学发了一个进度条生成的代码演示:

http://www.gbtags.com/gb/rtreplayerpreview/1138.htm

感觉很赞~有了这些工具,生成进度条就容易很多,老板再也不担心生成进度条费事了~

不过这几个链接好归好,可是有几个小缺点:

1.这个进度条,因为是从网络上拿的svg,所以造成了必须联网的情况下才能使用。对于我这种在外包公司里混的人,很容易碰到那种完全局域网的情况,所以这个就没办法用。

2. 这个进度条是更换图片,所以没有动画效果…

恩,所以我就根据soul发的链接,自己研究了一下,做了一个jquery插件,完全本地环境,并且支持动画。如果做的不好还请见谅~

  1. 代码github地址:
    https://github.com/clarkfbar/jquery.progress

参数支持

  1. var settings = {

  2. width: 90, // 进度条宽度

  3. height: 20, // 进度条高度

  4. percent: 0, // 当前占比

  5. backgroundColor: '#555', // 进度条背景颜色

  6. barColor: '#d9534f', // 进度条颜色

  7. radius: 4, // 边角圆度

  8. fontSize: 12, // 字体大小

  9. increaseTime: 1000.00/60.00, // 每一次调整进度条的时间, 默认最佳时间(可以调大,不要调小);只有在animate为true的情况下有效

  10. increaseSpeed: 1, // 每次调整,增长速度;只有在animate为true的情况下有效

  11. animate: true // 调整的时候,是否使用动画增长,默认为true

  12. };

我提供了一个动画的开关,因为当上传文件小的时候,animate的动画方法是完全没有必要的~

初始化插件:

1.引入插件和jquery

2. 在页面要放入进度条的地方,放如一个svg:

  1. <svg id="svg"></svg>

3. 调用插件:

  1. var progress = $("#svg").Progress({

  2. percent: 20,

  3. width: 180,

  4. height: 40,

  5. fontSize: 16

  6. });

4. 如果要修改进度

  1. progress.percent(90); // 修改进度条占比,并返回当前值。如果参数为空,返回当前值

有动画效果:(初始化4秒后从10%升到90%)

(具体效果请前往原文查看)

无动画效果:(初始化4秒后从20%升到90%)

(具体效果请前往原文查看)

把玩代码:

http://www.gbtags.com/gb/rtreplayerpreview/1225.htm

点击阅读原文,学习更多干货。

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/4118.html

分享给朋友:

“自创插件简单易用的自创进度条插件” 的相关文章

一个比 Nginx 还简单的 Web 服务器

企业级的 Web 服务器非常多,Nginx、Tomcat、Apache、IIS、FastAPI、Flask 等。今天松哥再给大家介绍一个开源的 Web 服务器,这款服务器具备自动 HTTPS 功能和高度可配置性,它的名字是:Caddy。Caddy 是一个 Go 编写的 Web 服务器,类似于 Ngi...

Nginx热升级流程,看这篇就够了

在之前做过 Nginx 热升级的演示,他能保证nginx在不停止服务的情况下更换他的 binary 文件,这个功能非常有用,但我们在执行 Nginx 的 binary 文件升级过程中,还是会遇到很多问题,比如老的 worker 进程一直退不掉或者新的 worker 进程升级以后出现问题需要考虑回滚,...

为何说捣腾 Nginx 少不了 Nginx-ui ?还自带 GPT 助手?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!什么是 Nginx UINginx UI 是一个基于 Web 的管理界面,旨在简化 Nginx 服务器的管理和配置。Yet another N...

听说你的Nginx还不会记录Response Body?

相信大家都遇到过在排查线上问题或Debug的时候,在某一瞬间,特别想开启Nginx的Response Body日志,来帮助自己快速的定位问题;但找半天发现只有$request_body/$upstream_addr/$upstream_response_time这些相近变量可用;这个时候不要慌......

ThinkPhp6从安装到配置全解

Thinkphp6已经不支持之前安装方式了,只能使用Composer安装,对于V6的新用户来说,真希望有个全过程手册,我就分享一下我自己安装使用的过程,供参考。一、安装Composer在 Linux 和 Mac OS中可以运行如下命令:curl -sS https://getcomposer.org...

解决Apache 2.4+PHP5.6不支持CURL

跑一个demo,突然发现,服务器上最普通的Apache 2.4+PHP5.6组合,不支持curl,报告没有curl_init函数;而php.ini里面已经打开了php_curl.dll,而且php -i的输出是正常的,说明curl是可以执行的。折腾了半天百思不得其解,最后索性把php5.6、apac...