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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
js module大战
Apr 19 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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新手上路(十三)
2006/10/09 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
Node 模块原理与用法详解
2020/05/13 Javascript
深入理解Django自定义信号(signals)
2018/10/15 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python+OpenCV实现图像拼接
2020/03/05 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
艺术教育实施方案
2014/05/03 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
商业计划书之服装
2019/09/09 职场文书