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 相关文章推荐
JS中Iframe之间传值的方法
Mar 11 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
Angular(5.2->6.1)升级小结
Dec 27 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
利用百度地图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中如何定义和使用常量
2013/02/28 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python的socket编程入门
2018/01/29 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python中xlutils库用法浅析
2020/12/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
班级团队活动方案
2014/08/14 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
自主招生英文自荐信
2015/03/25 职场文书
导游词之长城八达岭
2019/09/24 职场文书