html:

<div class="val2">0</div>

js:

let val2 = document.getElementsByClassName("val2")[0];
animateNum(val2, 36.3163, 4);
// 初始值 结束值 几个小数点
function animateNum(dom, val, dot){
let obj = {num1: dom.innerHTML};
TweenMax.to(obj, 1, {
num1: val,
onUpdate:function(){
dom.innerHTML=obj.num1.toFixed(dot);
},
delay: 0.1
});
}

还有最重要的去官网下载然后在引入

<script src="./lib/TweenMax.min.js"></script>

ok.....

用TweenMax.js动画让数字动起来的更多相关文章

  1. JS动画之缓动函数分析及动画库

    上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

  2. CountUp.js用法 让数字动起来的插件

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  4. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  5. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  6. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  7. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  8. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  9. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

随机推荐

  1. UnityEventSystem

    能够处理各种UI事件: IPointerEnterHandler:当指针进入 void OnPointerEnter(PointerEventData eventData); IPointerExit ...

  2. Windows下对函数打桩,及Linux类似技术

    一个简单的桩实现类: #define JMPCODE_LENGTH 5 //x86 平坦内存模式下,绝对跳转指令长度 #define JMPCMD_LENGTH 1 //机械码0xe9长度 #defi ...

  3. 【释疑】tp99、单实例qps

    tp99 tp99的定义 tp99 (top percentile 99),指一组数据从小到大排列,处于99%位置的数据的值.例如等差数列range(1,101),tp99=99 tp99优于平均值的 ...

  4. linux中从一台机器复制文件或目录到另一台机器上linux机器上

    本机IP:x.x.x.1需要拷贝的机器IP:x.x.x.2用户名:ssh_user 目的:将本机中source_path路径下的文件或目录拷贝到另一台机器的destination_path/路径下 复 ...

  5. eslint 修改规则 函数形参不使用报错

    函数再定义形参以后未使用就会出现报错的问题,需要设置一项eslint 规则 再.eslintrc.js   rules里面添加 "no-unused-vars": "of ...

  6. 测试需要了解的技术之基础篇四__UI自动化测试体系

    UI自动化测试体系 1.Andriod 自动化测试:Appium 环境安装与架构介绍.Appium Desktop用例录制.Appium测试用例流程.元素定位方法 IA/AID/XPATH/UISel ...

  7. Web Services调用存储过程简单实例

    转:http://www.cnblogs.com/jasenkin/archive/2010/03/02/1676634.html Web Services 主要利用 HTTP 和 SOAP 协议使商 ...

  8. express接受ajax的发送post请求

    两种常用的方式: $.ajax({ type: "POST", url: '/everdayPost', // data: JSON.parse({cont:data}),注意: ...

  9. python学习笔记(4)

    第六章 字符串操作 1.字符串处理 (1)字符串字 spam='Say hi to Bob\' s mother 面量 python中输入字符串:以单引号开始和结束 (2)双引号:字符串可以用双引号开 ...

  10. Apache Allow 命令

    用于设置哪些客户端可以访问 Apache,格式如下: Allow from [All /全域名/部分域名/IP 地址/网络地址/CIDR 地址] All:表示全部客户端 全域名:表示域名对应的客户端, ...