js实现数字递增特效【仿支付宝我的财富】
时间:2019-03-30
本文章向大家介绍js实现数字递增特效【仿支付宝我的财富】,主要包括js实现数字递增特效【仿支付宝我的财富】使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。
上面就是这个插件的效果,我们来看一下怎么使用的吧
第一: HTML部分这里简单列举一个
<div class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">小月博客</p> </div>
上面我们来了解两个关键的东西:
- data-to 这个属性控制你最终要递增的数值是多少
- data-speed 这个看英文的意思就很清楚了就是表示数据递增的速度了
ps: 这里的class和id 根据大家各自的修改去调整就好了,
第二:JS部分也是插件的核心代码
$.fn.countTo = function(a) { a = a || {}; return $(this).each(function() { var c = $.extend({}, $.fn.countTo.defaults, { from: $(this).data("from"), to: $(this).data("to"), speed: $(this).data("speed"), refreshInterval: $(this).data("refresh-interval"), decimals: $(this).data("decimals") }, a); var h = Math.ceil(c.speed / c.refreshInterval), i = (c.to - c.from) / h; var j = this, f = $(this), e = 0, g = c.from, d = f.data("countTo") || {}; f.data("countTo", d); if (d.interval) { clearInterval(d.interval) } d.interval = setInterval(k, c.refreshInterval); b(g); function k() { g += i; e++; b(g); if (typeof(c.onUpdate) == "function") { c.onUpdate.call(j, g) } if (e >= h) { f.removeData("countTo"); clearInterval(d.interval); g = c.to; if (typeof(c.onComplete) == "function") { c.onComplete.call(j, g) } } } function b(m) { var l = c.formatter.call(j, m, c); f.html(l) } }) }; $.fn.countTo.defaults = { from: 0, to: 0, speed: 1000, refreshInterval: 100, decimals: 0, formatter: formatter, onUpdate: null, onComplete: null }; function formatter(b, a) { return b.toFixed(2) } $("#count-number").data("countToOptions", { formatter: function(b, a) { return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",") } }); $(".timer").each(count); function count(a) { var b = $(this); a = $.extend({}, a || {}, b.data("countToOptions") || {}); b.countTo(a) };
以上就是代码的全部了,css部分就不在这里显示了,demo下载的小伙伴在下面点击下载吧!
其实这个插件可扩展性很大的,至于小伙伴喜欢什么样子的显示自己动手改造吧!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
- 关于date格式的两个案例(r4笔记第96天)
- 【新技术分享】C++17 最新进展
- Ant + Jenkies +Tomcat 自动构建部署Web项目
- 博客项目Tale思维导图,让项目不再难懂
- 关于权限管理的实用脚本(r4笔记第94天)
- Ant学习笔记
- 清理session的小插曲(r4笔记第95天)
- CVE-2017-16943 Exim UAF漏洞分析
- Java泛型学习
- Jenkins修改管理员密码.
- awk中的变量(r4笔记第93天)
- Spring思维导图,让Spring不再难懂(ioc篇)
- 基于dba_hist_sqlstat查看sql语句的性能历史(r4笔记第92天)
- 思维导图学 Maven
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- leetcode链表之两个链表的第一个公共节点
- 测试开发基础 mvn test | 利用 Maven Surefire Plugin 做测试用例基础执行管理
- 腾讯云Elasticsearch集群规划及性能优化实践
- 【赵渝强老师】在MongoDB中使用MapReduce方式计算聚合
- 2020-09-13:判断一个正整数是a的b次方,a和b是整数,并且大于等于2,如何求解?
- ASP.NET Core 性能优化最佳实践
- 如何在Vue中使用云开发的云函数,实现邮件发送
- 乐观锁与悲观锁
- 为什么配置文件加密了数据库配置信息,Spring Boot仍能成功连接数据库
- SpringBoot开发微信公众号
- 猿实战10——动态表单之实现类目属性绑定
- 猿实战11——类目属性绑定之el-tree的使用
- 猿实战12——类目属性之动态绑定
- 一个maskrcnn的目标检测和实例分割的小例子
- Nginx系列:Nginx自带后端健康检查