countUp.js实现数字动态变化效果
本文实例为大家分享了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文件 // target = id of html element or var of previously selected html element where counting occurs // startVal = the value you want to begin at // endVal = the value you want to arrive at // decimals =
-
countUp.js实现数字滚动效果
本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 countup.js countup.js是一个无依赖性.轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据.详见countup.js 1.3 countup.js使用 np
-
countup.js实现数字动态叠加效果
本文实例为大家分享了countup.js实现数字动态叠加效果的具体代码,供大家参考,具体内容如下 CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的. 再加上滚轮事件判断. 可配置的参数: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals
-
CountUp.js数字滚动插件使用方法详解
CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de
-
jquery轻量级数字动画插件countUp.js使用详解
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址 展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title> <!-- 该特效该引入的js插件 --> <
-
countUp.js实现数字动态变化效果
本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下 countUp.js官网:演示地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1&q
-
基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标 以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(number) 效果:多个页面元素中,均以动态效果显示不同的数字,可正可负.并动态改变至少一个元素内的数据. 2.基本原理 (1) 液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧. (2) 动态变化则通过使用定时器任务来完成,动态显示要确保变化足够的时长,因此,步长需要根据变化量来进行计
-
js+SVG实现动态时钟效果
本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.
-
Android自定义圆弧进度条加数字动态变化
本文实例为大家分享了Android自定义圆弧进度条数字变化的具体代码,供大家参考,具体内容如下 效果如下: 思路:一个内环圆弧和一个外环圆弧,因为有一个圆圈是在圆弧上做圆周运动,所以在画圆的时候必须要得到圆弧上的各个点的坐标,这里其实就用到了PathMeasure这个类,可以帮我们拿到这些点,在画圆弧的时候也理所应当的要使用path,然后根据外界动态的传值进行重绘就能达到动态的效果 代码如下: public class ProgressPathRainbow extends View { pri
-
JS+Canvas绘制动态时钟效果
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #
-
JS+Canvas实现动态时钟效果
基于Canvas制作的动态时钟demo,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></script> <script
-
JS实现颜色动态淡化效果
效果图: 代码如下: <html> <head> <title>颜色变换</title> <style type="text/css"> div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;} input{position:absolute;left:100px;top:100px;} </styl
随机推荐
- nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
- asp.net实现图片以二进制流输出的两种方法
- javascript字符串替换函数如何一次性全部替换掉
- PHP面向对象之领域模型+数据映射器实例(分析)
- YII2数据库查询实践
- PHP的Laravel框架结合MySQL与Redis数据库的使用部署
- Python中如何优雅的合并两个字典(dict)方法示例
- win2003服务器下配置 MySQL 群集(Cluster)的方法
- Javascript下的keyCode键码值表
- PHP+JS三级菜单联动菜单实现方法
- 清除可恶的mms.tjcq2.com弹出窗口
- java 实现截取字符串并按字节分别输出实例代码
- java 文件锁的简单实现
- php操作JSON格式数据的实现代码
- C#数字图象处理之图像灰度化方法
- 我的Node.js学习之路(二)NPM模块管理
- Python获取CPU、内存使用率以及网络使用状态代码
- Python基于Flask框架配置依赖包信息的项目迁移部署
- pandas 对日期类型数据的处理方法详解
- android6.0权限动态申请框架permissiondispatcher的方法