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. Delphi 快速检测是否联网 判断网线是否拔开。 但是不能判断是否能上网

    https://blog.csdn.net/chelen_jak/article/details/50204145 Delphi 快速检测是否联网 2015年12月07日 12:01:26 chele ...

  2. Delphi中TQuery.Filter用法

    今天维护一个老项目是用delphi5 + BDE写的.为了更方便查询数据,就增加一个查询功能.由于数据量查询出来后就比较少,于是就想到Filter like 但 BDE并不支持 Filter = 'n ...

  3. Windows下GIT的用户密码修改

    Windows下GIT的用户密码修改

  4. CDS究竟是个什么鬼?它直接导致了次贷危机?

    周五,中国银行间市场交易商协会就确认了这一消息,信用违约互换(CDS)和信用联结票据(CLN)业务指引在今日正式发布实行. 当然,这则消息在中国普通投资者当中还没引起足够关注,但是在很多人看来CDS这 ...

  5. vue中的$EventBus.$emit、$on的应用

    今天在项目中遇到的一个需求: 在一个选项卡功能的页面,出现的问题是,当点击选项卡的某个选项时,会同时加载整个选项卡的数据,本身产品就很大,数据很多,所以这个问题无法忽略: 仔细研究下发现,当刚进入页面 ...

  6. finereport 带多参数查询

    1.sql语句 ${,""," and dt.货主地区='"+comboBox0+"'")} ${,""," ...

  7. MySQL的count(*)性能怎么样?

    对于count(主键id)来说,innodb引擎会遍历整张表,把每一行的id值都取出来,返回给server层,server层判断id值不为空,就按行累加 对于count(1)来说,innodb引擎遍历 ...

  8. PHP7中的数据类型(一)计数引用、写时复制,可垃圾回收

    列个简单的表格说明一下:

  9. 【6.10校内test】T2 医院设置

    医院设置[题目链接] 感觉我超废 我是一个连floyd都不会写了的灵魂OI选手qwq(考场上写了半天spfa然后写炸了(微笑)) floyd的暴力: 1.先建树:用邻接矩阵存.存之前记得先初始化为IN ...

  10. A - 卿学姐与公主(线段树+单点更新+区间极值)

    A - 卿学姐与公主 Time Limit: 2000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...