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. Python学习之==>网络编程

    一.什么是网络编程 使用Python进行网络编程,就是通过Python打开一个网站,或者请求一个http接口.可以通过标准模块urllib实现,也可以通过更简单易用的第三方模块requests实现. ...

  2. vs2010发布网站时有些文件没有发布出去的解决办法。

    项目中包含了一些ttf字体文件做为图标使用,可是发布时发现生成的目录中没有这个文件,这种情况这么设置一下就可以解决: 1,在文件上点击右键,选择“属性”. 2,在弹出的属性窗口中,更改“生成操作”为“ ...

  3. laravel 中 同个主域名下,多个项目共享session登录状态

    共享session的前提是session在一个公共的地方,比如database,redis等,laravel框架提供了很大驱动选择: 这里只需要在配置文件里配置三个地方即可 'driver' => ...

  4. Linux 系统安装 python

    Centos 7 Centos 7 安装 python3 (不要卸载python2 因为yum 要用) https://phoenixnap.com/kb/how-to-install-python- ...

  5. .net core 学习小结之 配置介绍(config)以及热更新

    命令行的配置 var settings = new Dictionary<string, string>{ { "name","cyao"}, {& ...

  6. 关于Pulsar与Kafka

    在本系列的Pulsar和Kafka比较文章中,我将引导您完成我认为重要的几个领域,并且对于人们选择强大,高可用性,高性能的流式消息传递平台至关重要.消息传递模型(Messaging model)是用户 ...

  7. Quartz-第三篇 quartz-misfire 错失,补偿执行

    1.问题:使用pauseJob()后,再使用resumeJob(). Job如果中间时间足够短,默认会将之前错失的次数执行回来.这个问题的原因是执行调度策略的问题,quartz框架默认会将错失的执行次 ...

  8. 安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目

    安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目 一.下载安装Pycharm 首先要下载Pycharm这个软件,官网的下载地址是: http://www.jetbr ...

  9. PHP支付宝手机网站支付功能

    1.开通支付宝商家中心里面的手机网站支付 2.再去开放平台-开发者中心-创建移动支付的应用-获取到APPID 3.接着去文档中心下载DEMO 其实demo很简单.如果第一次看的话会存在看不懂的状态. ...

  10. k3 cloud在站点中新增用户

    1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...