当前位置: 首页 > news >正文

CountUp.js 实现数字增长动画 Vue

效果:

在这里插入图片描述

官网介绍

1. 安装

npm install --save countup.js

2. 基本使用

// template
<span ref="number1Ref"></span>// script
const number1Ref = ref<HTMLElement>()
onMounted(() => {new CountUp(number1Ref.value!, 9999999).start()
})

3. 参数

new CountUp(参数一, 参数二, option)
// 源码:CountUp类的构造函数,前两个参数必传,第三个参数为可选
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
  • 参数一: 数字所在容器
  • 参数二: 数字的最终值
  • option:更多配置项(可选)
// 括号内为默认值
interface CountUpOptions {startVal?: number; // 开始数字 (0)decimalPlaces?: number; // 小数位数 (0)duration?: number; // 动画时间:秒 (2)useGrouping?: boolean; // ,的位置。示例: 1,000 vs 1000 (true)useIndianSeparators?: boolean; // ,的位置。示例: 1,00,000 vs 100,000 (false)useEasing?: boolean; // ease animation (true)smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)separator?: string; // 分隔符 (',')decimal?: string; // 小数点 ('.')// easingFn: easing function for animation (easeOutExpo)easingFn?: (t: number, b: number, c: number, d: number) => number;formattingFn?: (n: number) => string; // 格式化为字符串prefix?: string; // 在结果前面添加字符suffix?: string; // 在结果后面添加字符numerals?: string[]; // 数字替换。numeral glyph substitutionenableScrollSpy?: boolean; // 当视图可见时开始动画scrollSpyDelay?: number; // 视图可见后,延迟多久(单位:ms)开始动画scrollSpyOnce?: boolean; // 只运行一次onCompleteCallback?: () => any; // 动画完成后的回调函数onStartCallback?: () => any; // 动画开始时的回调函数plugin?: CountUpPlugin; // 插入CountUp动画
}

4. 示例

const option = {duration: 5,	// 动画持续时间5秒prefix: '¥'	// 在结果加前缀字符 ¥
}
onMounted(() => {new CountUp(number1Ref.value!, 9999999, option).start()
})

在这里插入图片描述

参考文章:CountUp.js( 轻量级数字动画插件 )原文链接

相关文章:

CountUp.js 实现数字增长动画 Vue

效果&#xff1a; 官网介绍 1. 安装 npm install --save countup.js2. 基本使用 // template <span ref"number1Ref"></span>// script const number1Ref ref<HTMLElement>() onMounted(() > {new CountUp(number1Ref.value!, 9999999).sta…...

设计模式大全

1. 策略模式 什么是策略模式&#xff1f; 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以互换。策略模式使得算法可以独立于使用它的客户端而变化。通过使用策略…...

redis IO多路复用机制

目录 一、五种 I/O 模型 1.阻塞IO&#xff08;Blocking IO&#xff09; 2.非阻塞IO&#xff08;Nonblocking IO&#xff09; 3.IO多路复用&#xff08;IO Multiplexing&#xff09; 通知的方式 select模式 poll模式 epoll模式 4.信号驱动IO&#xff08;Signal Driven …...

Oracle漏洞修复 19.3 补丁包 升级为19.22

1.场景描述 上周末2024-10-12日,服务器扫出漏洞,希望及时修复。其中,oracle的漏洞清单如下,总结了下,基本都是 Oracle Database Server 的 19.3 版本到 19.20 版本和 21.3 版本到 21.11 版本存在安全漏洞,即版本问题。如: Oracle Database Server 安全漏洞(CVE-2023-22…...

Q2=10 and Q2=1--PLB(Fig.4)

&#xff08;个人学习笔记&#xff0c;仅供参考&#xff09; import numpy as np from scipy.special import kv, erfc from scipy.integrate import dblquad import matplotlib.pyplot as plt import scipy.integrate as spi# Constants w 0.6198 g0_sq 21.5989 rho 0.782…...

sd卡挂载返回FR_NOT_READY等错误

前言 本文章主要是例举文件系统挂载sd卡时出现的一下问题总结。本人用的芯片是GDF103系列&#xff0c;最近项目要使用sd进行读取文件&#xff0c;因此查阅了资料进行开发。一开始是使用了SPI方式连接&#xff0c;例程是原子哥的stm32进行改的&#xff0c;但多次调试都是卡死在发…...

推荐一款超级实用的浏览器扩展程序!实时翻译网页,支持多种语言(带私活源码)

今天给大家分享的一款浏览器插件。 一、背景 在如今的信息时代&#xff0c;互联网已经成为了人们获取信息、交流和娱乐的重要平台&#xff0c;而随着全球化的不断深入和交流的加强&#xff0c;越来越多的人开始关注各国的文化、政治和经济&#xff0c;因此需要浏览不同语言的…...

manjaro kde 24 应该如何设置才能上网(2024-10-13亲测)

要在 Manjaro KDE 24 上设置网络连接&#xff0c;可以按照以下步骤进行设置&#xff0c;确保你能够连接到互联网&#xff1a; 是的&#xff0c;你可以尝试使用一个简单的自动修复脚本来解决 Manjaro KDE 中的网络连接问题。这个脚本将检查网络服务、重新启动 NetworkManager、…...

2024软件测试面试大全(答案+文档)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、软件测试基础面试题 1、阐述软件生命周期都有哪些阶段? 常见的软件生命周期模型有哪些? 软件生命周期是指一个计算机软件从功能确定设计&#xff0c;到…...

unity动态批处理

unity动态批处理 动态批处理要求和兼容性渲染管线兼容性 使用动态批处理网格的动态批处理限制动态生成几何体的动态批处理 动态批处理 动态批处理是一种绘制调用批处理方法&#xff0c;用于批处理移动的 GameObjects 以减少绘制调用。动态批处理在处理网格和 Unity 在运行时动…...

faust,一个神奇的 Python 库!

大家好&#xff0c;今天为大家分享一个神奇的 Python 库 - faust。 Github地址&#xff1a;https://github.com/robinhood/faust 在分布式系统和实时数据处理的世界里&#xff0c;消息流处理&#xff08;Stream Processing&#xff09;变得越来越重要。Faust 是一个 Python 库…...

electron本地OCR实现

使用tesseract.js - npm (npmjs.com) 官方demo&#xff1a;GitHub - Balearica/tesseract.js-electron: An example to use tesseract.js in electron 目录结构&#xff1a; // 引入 <script type"module" src"./ocr/tesseract.js"></script>…...

RK3588的demo板学习

表层的线宽是3.8mil: 换层之后线宽变成了4.2mil: (说明对于一根线&#xff0c;不同层线宽不同) 经典&#xff1a; 开窗加锡&#xff0c;增强散热&#xff0c;扩大电流&#xff1a; R14的作用&#xff1a;与LDO进行分压&#xff0c;降低LDOP的压差从而减小其散热&#xff1a;第…...

基于springboot驾校管理系统

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…...

关于Vue脚手架

一、简介与安装 1 简介 Vue Cli 全称Vue command line interface(Vue命令行接口)&#xff0c;俗称Vue脚手架&#xff0c; 是Vue官方提供的一个标准化开发工具(开发平台)。 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】 参考官网&#xff1a…...

MySQL 指定字段排序

MySQL 中的 ORDER BY FIELD 用法详解 一、引言 在数据库查询中&#xff0c;排序是一个常见的需求。MySQL 提供了 ORDER BY 子句来对查询结果进行排序&#xff0c;其中 FIELD() 函数是一种非常巧妙且灵活的排序方式。通过 ORDER BY FIELD&#xff0c;可以按照指定的顺序对某个…...

Mysql—高可用集群MHA

1:什么是MHA&#xff1f; MHA&#xff08;Master High Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切…...

MeshGS: Adaptive Mesh-Aligned GaussianSplatting for High-Quality Rendering 论文解读

目录 一、概述 二、相关工作 1、神经渲染 2、基于Mesh的渲染 3、基于点的渲染和高斯溅射 三、前置知识 1、SDF 2、Marching Cubes算法 四、MeshGS 1、初始化Mesh网格 2、基于Mesh的GS溅射 3、损失函数 一、概述 提出一种基于距离的高斯splatting&#xff0c;并且将高…...

JDK-23与JavaFX的安装

一、JDK-23的安装 1.下载 JDK-23 官网直接下载&#xff0c;页面下如图&#xff1a; 2.安装 JDK-23 2.1、解压下载的文件 找到下载的 ZIP 文件&#xff0c;右键点击并选择“解压到指定文件夹”&#xff0c;将其解压缩到您希望的目录&#xff0c;例如 C:\Program Files\Java\…...

LeetCode讲解篇之2266. 统计打字方案数

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们使用逆向思维发现如果连续按存在三个字母的按键&#xff0c;最后一个按键表示的字母可以是某个字母连续出现一次、两次、三次这三种情况的方案数之和 我们发现连续按存在三个字母的按键&#xff0c;当连续按…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...