1. 程式人生 > 實用技巧 >JavaScript 數字動態動畫

JavaScript 數字動態動畫

在日常需求中會不會出現一些奇奇怪怪的需求,比如:動態數字

這裡的動態數字其實是一個數字懂最小值到設定值的一個動畫過程

也是基於jQuery選擇器的啦,js下載地址:animationNumber.js

需要依賴幾個小工具哦

JavaScript 小工具前置 js
1.計時器
2.UUID
3.原地自閉包

其公開兩種使用方式

animationNumber(setting);
$.fn.animationNumber(command,option);

其中

setting={
  from:0,//減少的值
  to:0,//最終目標值
  speed:0,//速度
  refreshInterval:100,//計時器速度
  decimals:0,//小數點
  target:"#xxx"//選擇器,
  onUpdate:null,//每次數字變更的回撥事件
  onComplete:null,//完成回撥事件
}
command="start|stop|reset"
option={
  from:0,//減少的值
  to:0,//最終目標值
  speed:0,//速度
  refreshInterval:100,//計時器速度
  decimals:0,//小數點
  onUpdate:null,//每次數字變更的回撥事件
  onComplete:null,//完成回撥事件
}
animationNumber(setting)方法下存在三個方法分別為start開始,stop停止,reset重置