js实现简单数字变动效果


Posted in Javascript onNovember 06, 2017

本文实例为大家分享了js实现数字变动效果展示的具体代码,供大家参考,具体内容如下

$.fn.countTo = function (options) {
 options = options || {};//当options未被初始化,即typeof options = 'undefined'时,执行后面部分即var options = {}来初始化一个对象

 return $(this).each(function () {
  // set options for current element
  var settings = $.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')
  }, options);

  // how many times to update the value, and how much to increment the value on each update
  //更新值多少次,每次更新值多快
  var loops = Math.ceil(settings.speed / settings.refreshInterval),
  increment = (settings.to - settings.from) / loops;

  // references & variables that will change with each update
  //引用和变量每次更新将改变
  var self = this,//返回html对象
  $self = $(this),//返回返回一个jquery对象
  loopCount = 0,
  value = settings.from,
  data = $self.data('countTo') || {};//获取jauery方法对象

  $self.data('countTo', data);//赋值

  // if an existing interval can be found, clear it first
  //如果存在间隔,则清除它
  if (data.interval) {
  clearInterval(data.interval);
  }
  data.interval = setInterval(updateTimer, settings.refreshInterval);

  // initialize the element with the starting value
  //用开始的值初始化
  render(value);

  function updateTimer() {
  value += increment;
  loopCount++;

  render(value);

  if (typeof(settings.onUpdate) == 'function') {
   settings.onUpdate.call(self, value);
  }

  if (loopCount >= loops) {
   // remove the interval
   $self.removeData('countTo');
   clearInterval(data.interval);
   value = settings.to;

   if (typeof(settings.onComplete) == 'function') {
   settings.onComplete.call(self, value);
   }
  }
  }

  function render(value) {
  var formattedValue = settings.formatter.call(self, value, settings);
  $self.html(formattedValue);
  }
 });
 };

 $.fn.countTo.defaults = {
 from: 200,  // the number the element should start at
 to: 0,   // the number the element should end at
 speed: 1000,  // how long it should take to count between the target numbers
 refreshInterval: 1, // how often the element should be updated
 decimals: 0,  // the number of decimal places to show
 formatter: formatter, // handler for formatting the value before rendering
 onUpdate: null, // callback method for every time the element is updated
 onComplete: null // callback method for when the element finishes updating
 };

 function formatter(value, settings) {
 return value.toFixed(settings.decimals);
 }

 // custom formatting example
 $('#count-number').data('countToOptions', {
 formatter: function (value, options) {
 return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
 }
 });

 // start all the timers
 $('.timer').each(count);
 function count(options) {
 var $this = $(this);
 options = $.extend({}, options || {}, $this.data('countToOptions') || {});
 $this.countTo(options);
 }

apply与call的简单用法,学习链接。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
JS实现图片放大镜插件详解
Nov 06 #Javascript
You might like
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php数组一对一替换实现代码
2012/08/31 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
php json相关函数用法示例
2017/03/28 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
python编写实现抽奖器
2020/09/10 Python
python3中数组逆序输出方法
2020/12/01 Python
保送生自荐信范文
2013/10/06 职场文书
自荐信怎么写好
2013/11/11 职场文书
工程班组长岗位职责
2013/12/30 职场文书
中学教师自我鉴定
2014/02/07 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
世界十大狙击步枪排行榜
2022/03/20 杂记
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS