动手吧,vue数字动画

数字动画,有数字的地方都能用上,拿去吧!

效果:

1、template部分

<template><div class="v-count-up">{{ dispVlaue }}</div>
</template>

2、js部分

export default {data() {return {timer: "",calcValue: 0,startTime: 0,remaining: 0,raf: "",};},props: {value: Number,startValue: {type: Number,default: 0,},time: {type: Number,default: 5000,},useease: {type: Boolean,default: true,},tofixed: {type: Number,default: 0,},separator: {type: Boolean,default: false,},reset: {type: Boolean,default: false,},},computed: {dispVlaue() {const calcValue = (this.calcValue || 0).toFixed(this.tofixed);return this.separator ? this.formatNumber(calcValue) : calcValue;},startVal() {return this.startValue > this.value ? this.value : this.startValue;},},created() {this.start();},watch: {reset() {this._reset();},},methods: {count(timestamp) {if (!this.startTime) {this.startTime = timestamp;}let progress = timestamp - this.startTime;this.remaining = this.time - progress;if (this.useease) {this.calcValue = this.easeOutExpo(progress,this.startVal,this.value - this.startVal,this.time);} else {this.calcValue =this.startVal + (this.value - this.startVal) * (progress / this.time);}if (this.calcValue > this.value) {this.calcValue = this.value;}if (progress < this.time) {this.raf = requestAnimationFrame(this.count);} else {this.$emit("end");cancelAnimationFrame(this.raf);}},start() {if (this.time > 0) {this.raf = requestAnimationFrame(this.count);} else {this.printValue();}},_reset() {this.startTime = 0;this.calcValue = 0;this.remaining = 0;this.start();},easeOutExpo(t, b, c, d) {return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;},printValue() {this.calcValue = this.value;},formatNumber(num) {var result, x, x1, x2, x3;result = String(num);x = result.split(".");x1 = x[0];x2 = x.length > 1 ? "." + x[1] : "";if (this.separator) {x3 = "";for (var i = 0, len = x1.length; i < len; ++i) {if (i !== 0 && i % 3 === 0) {x3 = "," + x3;}x3 = x1[len - i - 1] + x3;}x1 = x3;}return x1 + x2;},},destroyed() {cancelAnimationFrame(this.raf);},
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/142357.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode热题100】--54.螺旋矩阵

54.螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 按层遍历 可以将矩阵看成若干层&#xff0c;首先输出最外层的元素&#xff0c;其次输出次外层的元素&#xff0c;直到输出最内层的元素。 对于每层&…

【二叉树】——链式结构(快速掌握递归与刷题技巧)

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

《学术小白学习之路12》进阶-基于Python实现中文文本的DTM主题动态模型构建

《学术小白学习之路》基于Python实现中文文本的DTM主题动态模型构建 一、数据选择二、数据预处理三、输入数据ID映射词典构建四、文档加载成构造语料库五、DTM模型构建与结果分析六、结果进行保存七、保存模型一、数据选择 所选取的数据集是论文摘要,作为实验数据集,共计12条…

基于微信小程序的校园代送跑腿系统(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

[C++网络协议] 优于select的epoll

1.epoll函数为什么优于select函数 select函数的缺点&#xff1a; 调用select函数后&#xff0c;要针对所有文件描述符进行循环处理。每次调用select函数&#xff0c;都需要向该函数传递监视对象信息。 对于缺点2&#xff0c;是提高性能的最大障碍。因为&#xff0c;套接字是…

python+requests+pytest+allure自动化框架

1.核心库 requests request请求 openpyxl excel文件操作 loggin 日志 smtplib 发送邮件 configparser unittest.mock mock服务 2.目录结构 base utils testDatas conf testCases testReport logs 其他 2.1base base_path.py 存放绝对路径,dos命令或Jenkins执行…

C++,异常、转换函数、智能指针

目录 一、异常 1 C 异常机制&#xff1a; 2 使用try catch进行异常处理. 3、c 已经内置标准异常类&#xff0c;专业用于抛出的语法中 4 自定义异常&#xff1a; 5 函数只抛出&#xff0c;不处理。让上层函数处理&#xff0c;并且上层函数还可以不处理&#xff0c;让上上层…

Spring 学习(六)代理模式

10. 代理模式 案例 10.1 静态代理 角色分析 抽象角色&#xff1a;一般使用接口或者抽象类实现。真实角色&#xff1a;被代理的角色。代理角色&#xff1a;代理真实角色&#xff0c;含附属操作。客户&#xff1a;访问代理对象的角色。 租房案例 定义租赁接口 /*** TODO* 租房*…

MySQL 基础

本系列文章为【狂神说 Java 】视频的课堂笔记&#xff0c;若有需要可配套视频学习。 1. 简介 数据库&#xff08;DB&#xff0c;Database&#xff09;是安装在操作系统上的存储数据的软件。 关系型数据库&#xff08;RDB&#xff09;以行列形式存储数据。 非关系型数据库&am…

竞赛选题 基于视觉的身份证识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的身份证识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-sen…

第二届全国高校计算机技能竞赛——Java赛道

第二届全国高校计算机技能竞赛——Java赛道 小赛跳高 签到题 import java.util.*; public class Main{public static void main(String []args) {Scanner sc new Scanner(System.in);double n sc.nextDouble();for(int i 0; i < 4; i) {n n * 0.9;}System.out.printf(&…

JavaScript系列从入门到精通系列第四篇:JavaScript基本语法(二)

文章目录 前言 一&#xff1a;Number类型 1&#xff1a;字符串与Number类型 2&#xff1a;检查数据类型 3&#xff1a;Number最大值 4&#xff1a;Number四则运算精确性 二&#xff1a;布尔值 1&#xff1a;布尔值数量 2&#xff1a;布尔值类型查看 三&#xff1a;N…

基于微信小程序的电影院订票系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言运行环境说明用户微信小程序端的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考论文参考源码获取 前言 &#x1f497;博主介绍&…

python -文件相关操作

文章目录 前言python -文件相关操作1. 读取文件1.1. 读取整个文件内容1.2. 读取文件的一行内容1.3. 将文件的内容按行存储到一个列表中 2. 写入文件3. 删除文件4. 追加文件5. 遍历文件5.1. 使用 os 模块 遍历文件5.2. # 使用 glob 模块 遍历文件5.3. 使用os.listdir() 函数遍历…

LeetCode 接雨水 双指针

原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题面&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a…

TS编译选项——不允许使用隐式any类型、不明确类型的this、严格检查空值、编译后文件自动设置严格模式

一、不允许使用隐式any类型 在tsconfig.js文件中配置noImplicitAny属性 {"compilerOptions": {// 不允许使用隐式any类型"noImplicitAny": true} } 开启后即可禁止使用隐式的any类型 注意&#xff1a;显式的any类型并不会被禁止 二、不允许使用不明确类…

uniapp——实现base64格式二维码图片生成+保存二维码图片——基础积累

最近在做二维码推广功能&#xff0c;自从2020年下半年到今天&#xff0c;大概有三年没有用过uniapp了&#xff0c;而且我之前用uniapp开发的程序还比较少&#xff0c;因此很多功能都浪费了很多时间去查资料&#xff0c;现在把功能记录一下。 这里写目录标题 效果图1.base64生成…

算法基础之归并排序

一、归并排序的形象理解 原题链接 示例代码 void merge_sort(int q[], int l, int r) {if (l > r) return;int mid l r >> 1;merge_sort(q, l, mid), merge_sort(q, mid 1, r);int k 0, i l, j mid 1;while (i < mid && j < r) //第一处if (q[i]…

通过410s读取电表数据并接入物联网平台

通过410s读取电表数据并接入物联网平台 设备接线准备设备调试代码实现Modbus TCP Client 读取电表数据读取寄存器数据转成32bit Float格式然后使用modbusTCP Client 读取数据 使用mqtt协议接入物联网平台最终代码实现 设备接线准备 设备调试 代码实现 Modbus TCP Client 读取…

LeetCode刷题

一 螺旋矩阵 题目链接&#xff1a;59. 螺旋矩阵 II - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a;…