js截取小数点前的数字_让数字动起来的动画库—CountUp.js

CountUp.js是一个轻量级的Javascript数字动画库&＃xff0c;可用来快速创建一种有趣的动画方式显示数值数据&＃xff0c;可用于各种数据大屏展示&＃xff0c;以提升用户体验。

- 效果 -

- 源地址 -

https://github.com/inorganik/countUp.js

- 特性 -

•高度可定制&＃xff0c;选项丰富•智能缓动动画&＃xff1b;可以智能的缓动到足够接近最终值•支持各大新旧浏览器(可通过选择countUp.min.js用于现代浏览器或countUp.withPolyfill.min.js用于IE9及更早版本以及Opera mini)•支持各大前端框架/库(Vue&＃xff0c;React&＃xff0c;Angular&＃xff0c;jQuery&＃xff0c;WordPress)

- 安装方法 -

•NPM安装

npm i countup.js

•源文件下载地址

https://github.com/inorganik/countUp.js/tree/c229fbb1b2de25fb99aa130914e8c34343539b9b/dist

countUp.min.js压缩后的源文件

countUp.withPolyfill.min.js用于支持老旧浏览器

countUp.umd.js用于支持UMD模块化加载的框架

- 基本使用方式 -

const countUp &＃61; new CountUp(DOMElement, 1949, options);

第一个参数传入要渲染的DOM元素&＃xff0c;第二个参数传入结束的数字&＃xff0c;第三个参数可以传入更多的个性配置化选项

配置

startVal&＃xff1a;开始值(初始值0)

decimalPlaces&＃xff1a;小数点位数(默认值 0)

duration&＃xff1a;动画持续时间(以秒为单位&＃xff0c;默认值 2)

useGrouping&＃xff1a;是否开启数值分组 (例如1,000 vs 1000&＃xff0c;默认值 true)

useEasing&＃xff1a;是否开启ease动画效果(默认值 true)

smartEasingThreshold&＃xff1a;智能平滑动画阈值(默认值999)

separator&＃xff1a;数值分组字符(默认值“&＃xff0c;”)

decimal&＃xff1a;小数点字符(默认值 ".”)

easingFn: 自定义动画函数

formattingFn&＃xff1a;自定义数字格式化函数

prefix&＃xff1a;数字前添加内容

suffix&＃xff1a;数字后添加内容

numerals&＃xff1a;数字字符替换

更多详情请查看countUp.js的源地址仓库

- 联系与投稿 -

欢迎大家投稿分享各种便捷实用的或新奇有趣的前端工具库或插件&＃xff0c;让我们一起建立起一个便捷的前端工具中文介绍库&＃xff0c;便于各位前端开发者搜索使用和提高工作效率&＃xff01;

联系方式&＃xff1a;公众号私信 或 发邮件到 FEZIRO&＃64;foxmail.com

- END -