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 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php 用sock技术发送邮件的函数
2007/07/21 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
JavaScript 乱码问题
2009/08/06 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
解析python的局部变量和全局变量
2019/08/15 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
家属慰问信
2015/02/14 职场文书
计算机实训心得体会
2016/01/14 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Python基础知识学习之类的继承
2021/05/31 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server