多语言展示
当前在线:1219今日阅读:27今日分享:41

如何实现前端界面的数字从跳动到增加到指定值

我们在开发一个项目时,有时候会需要将界面上展示的统计数据做成动态的跳动,例如从1开始跳动增加到指定值,下面小编来介绍一下这个如何实现
工具/原料

countUp.js

方法/步骤
2

在需要跳动显示的前端jsp页面应用countUp.js

3

将放置需要跳动显示的数字的标签定义一个id

4

在js中调用该方法:new CountUp('allCar', 0, 100, 0, 2).start();各个参数含义如下: new CountUp(target, startVal, endVal, decimals, duration).start(); target : 目标元素的id startVal : 你想要开始的值 endVal : 你想要到达的值 decimals : 小数位数,默认值为0 duration : 动画持续时间为秒,默认值为2

5

此时再刷新前端界面,就可以看到数字从1开始跳动显示到指定数字的效果

推荐信息