countUp.js实现数字动态变化效果
2019-10-18 07:04
1821 查看
本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下
countUp.js官网:演示地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1"></h1> <h1 id="num2"></h1> <h1 id="num3"></h1> <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script> <script type="text/javascript"> var options = { useEasing: true, // 使用缓和 useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true) separator: ',', // 分隔器(千位分隔符,默认为',') decimal: '.', // 十进制(小数点符号,默认为 '.') prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等) suffix: '' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) }; // CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六) // 参数一: 数字所在容器 // 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长 // 参数三: 数字增长后的最终值,该值一般通过异步请求获取 // 参数四: 数字小数点后保留的位数 // 参数五: 数字增长特效的时间,此处为3秒 // 参数六: 其他配置项 // 注: 参数六也可不加,其配置项则为默认值 new CountUp("num1", 0, 1380, 0, 3, options).start(); new CountUp("num2", 0, 1380, 2, 3, options).start(); new CountUp("num3", 0, 1380, 4, 3, options).start(); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- countUp.js 实现数字滚动 动态效果
- CountUp.js实现数字滚动增值效果
- 基于JS实现数字动态变化显示效果附源码
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)
- Js实现动态更改Css样式之土豆网开/关灯效果!
- js实现兼容PC端和移动端滑块拖动选择数字效果
- js+SVG实现动态时钟效果
- 基于jQuery实现动态数字展示效果
- jquery鼠标滚动数字增加插件---countUp.js
- Shine.js实现动态阴影效果
- 企业网站展示补充用Jquery实现简单的动态变化效果
- js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写),实现行与行之的颜色相间,高光的效果
- js实现层关闭/文本框2的值随文本框1内数字变化
- UICountingLabel实现数字变化的动画效果-b
- JS实现搜索框动态效果
- JS 实现倒计时数字时钟效果【附实例代码】
- js+canvas实现动态吃豆人效果
- js动画效果(移动、变化效果)实现整理
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- js+css绘制颜色动态变化的圈中圈效果