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

css 数字从0开始增加的动画效果

项目场景:

提示:这里简述项目相关背景:

在有些时候比如在做C端项目的时候,页面一般需要一些炫酷效果,比如数字会从小值自动加到数据返回的值

css 数字从0开始增加的动画效果

 


分析:

提示:这里填写问题的分析:

可以使用自定义属性,让自定义属性的值自动从小值一直自动加到与后端返回的值一样大,

这里需要注意一点,需要在节点挂载完成后才可以,不然,给节点加属性的时候找不到哪个节点,

另外也要拿到后端返回的值,因为自动加到的值与后端返回的一样才行,


解决方案:

提示:这里填写该问题的具体解决方案:

<template><div ref="observerElement" class="observed-element flexEv bannerBg padTB100 padLR65 colorW"><div class="flex" v-for="item in props.bannerInfo"><div class="borderR paddingR20 flexC"><i :class="item.icon" class="iconfont fontS40 fontW4 colorW hoverS"></i></div><div class="paddingL20"><div ref="numRef" class="fontS26 fontW6 marginB10 number inLb":data-target="item.textTop"></div> <div class="fontS26 fontW6 inLb">+</div><div class="fontS18 fontW5">{{item.textBottom}}</div></div></div></div>
</template><script lang="ts" setup>
import {reactive,toRefs,ref,Ref,PropType,onMounted,onBeforeUnmount,
} from "vue"
const props=defineProps({// bannerInfo:{type:Array},
})
// 自动将数值加到会后那个值的方法
const changeNum=()=>{// 获取元素const numbers = document.querySelectorAll('.number')console.log("",numbers)// 获取所有的dom,querySelectorAll为为数组numbers.forEach(item => {item.textContent = "0";const upDateNumber = () => {// 获取每个类名为number的data-target,即获取最大值 const target = Number(item.getAttribute('data-target'))// 获取当前div的数值const d = Number(item.textContent)// 设置数据增加的值,可以通过target除的数值确定怎么加数值的快慢const increment = target / 100// 当数字小于最大值时,执行下面的操作if (d < target) {// 向上取整item.textContent = `${Math.ceil(d + increment)}`// 1ms重新调用,不然它会在第一次运行完就结束setTimeout(upDateNumber, 1000)} else {item.textContent = target+"";//textContent的值是 字符串 所以加个空字符}}upDateNumber()})
}
// 在节点挂载完成后 再执行
onMounted(()=>{console.log()changeNum()
})onBeforeUnmount(()=>{console.log()
})
const emit =defineEmits([""
])</script><style lang="less" scoped>
.bannerBg{background-color:#1d7b51 ;
}
.borderR{border-right: 1px solid #ffffff;
}
</style>

相关文章:

css 数字从0开始增加的动画效果

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 在有些时候比如在做C端项目的时候&#xff0c;页面一般需要一些炫酷效果&#xff0c;比如数字会从小值自动加到数据返回的值 css 数字从0开始增加的动画效果 分析&#xff1a; 提示&#xff1a;这里填…...

【MongoDB篇】MongoDB的索引操作!

目录 引言第一节&#xff1a;天生的“索引小能手”——_id 索引 &#x1f194;第二节&#xff1a;自己动手&#xff0c;丰衣足食——创建索引 &#x1f511;&#x1f6e0;️第三节&#xff1a;索引的“类型”——因“材”施“索”&#xff01;&#x1f333;&#x1f511;第四节…...

写劳动节前的 跨系统 文件传输

功能说明&#xff1a; 协议隐身&#xff1a;流量伪装为HTTPS图片传输 动态混淆&#xff1a;每个数据包添加随机填充 军用级擦除&#xff1a;临时文件三次覆写清除 抗分析&#xff1a;随机传输时间间隔和端口跳跃 隐蔽通道&#xff1a;ALTSHIFTC触发隐藏控制台 网络架构建…...

腾讯元宝桌面客户端:基于Tauri的开源技术解析

2025年3月,腾讯元宝宣布上线电脑客户端版本,支持Windows和macOS系统。作为腾讯旗下的AI助手产品,腾讯元宝桌面端采用了Tauri而非传统的Electron作为其跨平台开发框架,这一技术选择体现了腾讯对应用性能、安全性和用户体验的重视。本文将依据腾讯元宝桌面客户端的用户规则中…...

重塑驾乘体验!哈曼Ready系列引爆「人车交互革命」

AI定义汽车趋势下&#xff0c;AI加速赋能整车辅助驾驶、智能座舱、智能底盘等各域。 以智能座舱为例&#xff0c;AI大模型的快速应用与迭代&#xff0c;推动智能座舱加速迈入“多模交互”阶段&#xff0c;融合视觉、听觉、触觉等感知技术&#xff0c;智能座舱向着终极形态演进…...

第二章-科学计算库NumPy

第二章-科学计算库NumPy Numpy 作为高性能科学计算和数据分析的基础包,是其他重要数据分析工具的基础, 掌握 NumPy 的功能及其用法, 将有助于后续其他数据分析工具的学习. 2.1 认识 NumPy 数组对象 NumPy 中最重要的一个特点就是其 N 维数组对象, 即 ndarray(别名 array) 对象…...

3.2goweb框架GORM

GORM 是 Go 语言中功能强大的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;支持 MySQL、PostgreSQL、SQLite、SQL Server 等主流数据库。以下是 GORM 的核心概念和用法详解&#xff1a; ​​一、基础入门​​ 1. 安装 go get -u gorm.io/gorm go get -u gorm.io…...

KUKA机器人不同的用户权限详细介绍

对于KUKA机器人&#xff0c;主菜单里有一个“用户组”的登录&#xff0c;不同的用户组对应不同的权限。 一、KUKA示教器正常开机后显示以下界面&#xff0c;对于8.5及以上的系统&#xff0c;增加了快捷登录用户组的符号 &#xff0c;直接点击即可打开。在 smartHMI 上&…...

AI对IT行业的重塑:挑战与机遇并存的技术革命

一、必要性&#xff1a;AI成为IT行业的基础设施 在云计算、大数据和物联网构成的数字生态中&#xff0c;AI技术已成为IT行业的"水电煤"。以微软Azure为例&#xff0c;其AI云服务支撑着全球超过85%的《财富》500强企业&#xff0c;通过机器学习模型自动优化服务器集群…...

利用IEEE异常机制优化Fortran浮点数计算

利用IEEE异常机制优化Fortran浮点数计算 在Fortran程序中&#xff0c;IEEE浮点异常机制可以帮助你检测和优化浮点数计算&#xff0c;提高数值稳定性和程序健壮性。以下是几种利用IEEE异常机制优化浮点数计算的方法&#xff1a; 1. 启用和检测IEEE异常 现代Fortran&#xff0…...

构建网页版IPFS去中心化网盘

前言&#xff1a;我把它命名为无限网盘 Unlimited network disks&#xff08;ULND&#xff09;&#xff0c;可以实现简单的去中心化存储&#xff0c;其实实现起来并不难&#xff0c;还是依靠强大的IPFS&#xff0c;跟着我一步一步做就可以了。 第一步&#xff1a;准备开发环境…...

【solidity基础】一文说清楚合约函数的大小事

在 Solidity 里,函数是合约的关键构成部分,用于执行特定任务或操作的代码块,可以包含逻辑、访问状态变量、进行计算,并且可以接受参数和返回值。 但是solidity 的函数与其他语言不太一样,经常会有同学搞混,这里开一篇文章完整介绍一下 solidity 函数的用法。 1. 函数定…...

用Python构建自动驾驶传感器融合算法:从理论到实践

用Python构建自动驾驶传感器融合算法:从理论到实践 随着自动驾驶技术的飞速发展,传感器在自动驾驶系统中的作用愈发重要。传感器不仅是车辆感知外部环境的“眼睛”,它们提供的信息也是自动驾驶决策系统的基础。然而,单一传感器的感知能力是有限的。为了提升自动驾驶系统的…...

PLC与工业电脑:有什么区别?

随着工业部门的快速发展&#xff0c;自动化已经从奢侈品转变为绝对必需品。世界各地的工业越来越多地采用工业自动化来提高效率、提高精度并最大限度地减少停机时间。这场自动化革命的核心是两项关键技术&#xff1a;可编程逻辑控制器&#xff08;PLC&#xff09;和电脑&#x…...

机器学习:在虚拟环境中使用 Jupyter Lab

机器学习&#xff1a;在虚拟环境中使用 Jupyter Lab 第一步&#xff1a;激活虚拟环境 打开终端&#xff08;CMD/PowerShell&#xff09;并执行&#xff1a; $cmd #激活虚拟环境 $conda activate D:\conda_envs\mll_env 激活后&#xff0c;终端提示符前会显示环境名称&…...

Arduino项目实战与编程技术详解

一、智能避障小车:超声波传感器与PWM电机控制 1.1 硬件需求与工作原理 智能避障小车的核心在于超声波传感器与电机驱动模块的协同工作。超声波传感器(HC-SR04)通过发射高频声波并接收回波来测量距离,而L298N电机驱动模块则负责控制两个直流电机的转向与速度。 1.1.1 超声…...

AI数字人:人类身份与意识的终极思考(10/10)

文章摘要&#xff1a;AI数字人技术正在引发从"像素复刻"到"意识投射"的范式革命&#xff0c;多模态交互、神经辐射场等技术突破推动数字人从工具属性迈向虚拟主体。其发展伴随身份认同危机、伦理困境&#xff0c;促使人类重新思考自我认知与"人之为人…...

【单例模式】简介

目录 概念理解使用场景优缺点实现方式 概念理解 单例模式要保证一个类在整个系统运行期间&#xff0c;无论创建多少次该类的对象&#xff0c;始终只会有一个实例存在。就像操作系统中的任务管理器&#xff0c;无论何时何地调用它&#xff0c;都是同一个任务管理器在工作&#…...

安凯微以创新之芯,赋能万物智能互联新时代

在全球半导体产业步入深度调整期的当下&#xff0c;安凯微用一份“技术浓度”远超“财务数字”的年报&#xff0c;向市场传递出其作为物联网智能硬件核心SoC芯片领军者的战略定力。面对行业短期波动&#xff0c;公司选择以技术纵深突破与生态价值重构为锚点&#xff0c;在逆势中…...

TIME_WAIT状态+UDP概念及模拟实现服务器和客户端收发数据

目录 一、TIME_WAIT状态存在的原因 二、TIME_WAIT状态存在的意义 三、TIME_WAIT状态的作用 四、UDP的基本概念 4.1 概念 4.2 特点 五、模拟实现UDP服务器和客户端收发数据 5.1 服务器udpser 5.2 客户端udpcil 一、TIME_WAIT状态存在的原因 1.可靠的终止TCP连接。 2.…...

高并发内存池(五):性能测试与性能优化

前言 在前几期的实现中&#xff0c;我们完成了tcmalloc基础的内存管理功能&#xff0c;但还存在两个关键问题&#xff1a; 未处理超过256KB的大内存申请。 前期测试覆盖不足&#xff0c;导致多线程场景下隐藏了一些bug。 本文将修复这些问题&#xff0c;并实现三个目标&…...

景联文科技牵头起草的《信息技术 可扩展的生物特征识别数据交换格式 第4部分:指纹图像数据》国家标准正式发布

2025年3月28日&#xff0c;由景联文科技作为第一起草单位主导编制的国家标准GB/T 45284.4-2025 《信息技术 可扩展的生物特征识别数据交换格式 第4部分&#xff1a;指纹图像数据》正式获批发布&#xff0c;将于2025年10月1日开始实施。该标准的制定标志着我国生物特征识别领域标…...

完美解决 mobile-ffmpeg Not overwriting - exiting

在使用ffmpeg库 &#xff0c;有pcm转换到 aac的过程中报错 mobile-ffmpeg Not overwriting - exiting终于在网上翻到&#xff0c;在output 输出文件的地方加 -y, 重复覆盖的意思&#xff0c;完美解决。...

4:QT联合HALCON编程—机器人二次程序抓取开发(九点标定)

判断文件是否存在 //判断文件在不在 int HandEyeCalib::AnsysFileExists(QString FileAddr) {QFile File1(FileAddr);if(!File1.exists()){QMessageBox::warning(this,QString::fromLocal8Bit("提示"),FileAddrQString::fromLocal8Bit("文件不存在"));retu…...

C语言之操作符

目录 1. 操作符的分类 2. 移位操作符 2.1 左移操作符 << 2.2 右移操作符 >> 3. 位操作符 3.1 按位与 & 3.2 按位或 | 3.3 按位异或 ^ 3.4 按位取反 ~ 3.5 例题 3.5.1 按位异或 ^ 拓展公式 3.5.2 不能创建临时变量&#xff08;第三个变量&#xff…...

【优选算法 | 前缀和】前缀和算法:高效解决区间求和问题的关键

算法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;双指针滑动窗口二分查找 在本篇文章中&#xff0c;我们将深入解析前缀和算法的原理。从基础概念到实际应用&#xff0c;带你了解如何通过前缀和高效解决数组求和、区间查询等问题。无论你是刚接触算法的新手&am…...

『深夜_MySQL』详解数据库 探索数据库是如何存储的

1. 数据库基础 1.1 什么是数据库 存储数据用文件就可以了&#xff0c;那为什么还要弄个数据库&#xff1f; 一般的文件缺失提供了数据的存储功能&#xff0c;但是文件并没有提供非常好的数据管理能力&#xff08;用户角度&#xff0c;内容方面&#xff09; 文件保存数据有以…...

Microsoft Entra ID 免费版管理云资源详解

Microsoft Entra ID(原 Azure AD)免费版为企业提供了基础的身份管理功能,适合小型团队或预算有限的组织。以下从功能解析到实战配置,全面展示如何利用免费版高效管理云资源。 1. 免费版核心功能与限制 1.1 功能概览 功能免费版支持情况基础用户与组管理✔️ 支持创建、删除…...

k8s -hpa

hpa定义弹性自动伸缩 1、横向伸缩,当定义的cpu、mem指标达到hpa值时,会触发pods伸展 2、安装metrics-server 收集pods的cpu。mem信息供hpa参照 安装helm curl -fsSl -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 用helm安装metr…...

Web应用开发指南

一、引言 随着互联网的迅猛发展&#xff0c;Web应用已深度融入日常生活的各个方面。为满足用户对性能、交互与可维护性的日益增长的需求&#xff0c;开发者需要一整套高效、系统化的解决方案。在此背景下&#xff0c;前端框架应运而生。不同于仅提供UI组件的工具库&#xff0c…...

Vue3 + TypeScript 实现 PC 端鼠标横向拖动滚动

功能说明 ​​拖动功能​​&#xff1a; 鼠标按下时记录初始位置和滚动位置拖动过程中计算移动距离并更新滚动位置松开鼠标后根据速度实现惯性滚动 ​​滚动控制​​&#xff1a; 支持鼠标滚轮横向滚动&#xff08;通过 wheel 事件&#xff09;自动边界检测防止滚动超出内容…...

MyBatis的SQL映射文件中,`#`和`$`符号的区别

在MyBatis的SQL映射文件中,#和$符号用于处理SQL语句中的参数替换,但它们的工作方式和使用场景有所不同。 #{} 符号 预编译参数:#{} 被用来作为预编译SQL语句的占位符。这意味着MyBatis会将你传入的参数设置为PreparedStatement的参数,从而防止SQL注入攻击,并允许MyBatis对…...

Python----卷积神经网络(池化为什么能增强特征)

一、什么是池化 池化&#xff08;Pooling&#xff09;是卷积神经网络&#xff08;CNN&#xff09;中的一种关键操作&#xff0c;通常位于卷积层之后&#xff0c;用于对特征图&#xff08;Feature Map&#xff09;进行下采样&#xff08;Downsampling&#xff09;。其核心目的是…...

React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)

React Native 从零开始完整教程&#xff08;环境配置 → 国内镜像加速 → 运行项目&#xff09; 本教程将从 环境配置 开始&#xff0c;到 国内镜像加速&#xff0c;最后成功运行 React Native 项目&#xff08;Android/iOS&#xff09;&#xff0c;适合新手和遇到网络问题的开…...

SNR8016语音模块详解(STM32)

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 三、程序设计 main文件 usart.h文件 usart.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 SNR8016语音模块是智纳捷科技生产的一种离线语音识别模块&#xff0c;设计适合用于DIY领域&#xff0c;开放用户设…...

驱动开发系列54 - Linux Graphics QXL显卡驱动代码分析(一)设备初始化

一&#xff1a;概述 QXL 是QEMU支持的一种虚拟显卡&#xff0c;用于虚拟化环境中的图形加速&#xff0c;旨在提高虚拟机的图形显示和远程桌面的用户体验&#xff1b;QEMU 也称 Quick Emulator&#xff0c;快速仿真器&#xff0c;是一个开源通用的仿真和虚拟化工具&#xff0c;可…...

通过IP计算分析归属地

在产品中可能存在不同客户端&#xff0c;请求同一个服务端接口的场景。 例如小程序和App或者浏览器中&#xff0c;如果需要对请求的归属地进行分析&#xff0c;前提是需要先获取请求所在的国家或城市&#xff0c;这种定位通常需要主动授权&#xff0c;而用户一般是不愿意提供的…...

【网络原理】从零开始深入理解HTTP的报文格式(二)

本篇博客给大家带来的是网络HTTP协议的知识点, 续上篇文章,接着介绍HTTP的报文格式. &#x1f40e;文章专栏: JavaEE初阶 &#x1f680;若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅…...

【前缀和】二维前缀和(模板题)

DP35 【模板】二维前缀和 DP35 【模板】二维前缀和 ​ 给你一个 n 行 m 列的矩阵 A ,下标从 1 开始,接下来有 q 次查询,每次查询输入 4 个参数 x1 , y1 , x2 , y2。 ​ 请输出以 (x1, y1) 为左上角,(x2,y2) 为右下角的子矩阵的和。 输入描述: ​ 第一行包含三个整数 …...

【开源工具】Python打造智能IP监控系统:邮件告警+可视化界面+配置持久化

&#x1f310;【开源工具】Python打造智能IP监控系统&#xff1a;邮件告警可视化界面配置持久化 &#x1f308; 个人主页&#xff1a;创客白泽 - CSDN博客 &#x1f525; 系列专栏&#xff1a;&#x1f40d;《Python开源项目实战》 &#x1f4a1; 热爱不止于代码&#xff0c;热…...

kotlin 过滤 filter 函数的作用和使用场景

1. filter 函数的作用 filter 是 Kotlin 集合操作中的一个高阶函数&#xff0c;用于根据指定条件从集合中筛选出符合条件的元素。 作用&#xff1a;遍历集合中的每个元素&#xff0c;并通过给定的 lambda 表达式判断是否保留该元素。返回值&#xff1a;一个新的集合&#xff…...

Java泛型(补档)

核心概念 Java 泛型是 Java SE 1.5 引入的一项重要特性&#xff0c;它的核心思想是 参数化类型&#xff08;Parameterized Types&#xff09;&#xff0c;即通过将数据类型作为参数传递给类、接口或方法&#xff0c;使代码能够灵活地处理多种类型&#xff0c;同时保证类型安全性…...

C语言发展史:从Unix起源到现代标准演进

C语言发展史&#xff1a;从Unix起源到现代标准演进 C语言的诞生与早期发展 C语言的起源可以追溯到上世纪70年代初期&#xff0c;但其真正的萌芽始于1969年的夏天。在计算机发展史上&#xff0c;这是一个具有划时代意义的时刻。 当时&#xff0c;Ken Thompson和Dennis Ritchi…...

nginx 代理时怎么更改 Remote Address 请求头

今天工作中遇到用 localhost 访问网站能访问后台 api&#xff0c;但是用本机IP地址后就拒绝访问&#xff0c;我怀疑是后台获取 Remote Address 然后设置白名单了只能 localhost 访问。 想用 nginx 更改 Remote Address server {listen 8058;server_name localhost;loca…...

解决STM32待机模式无法下载程序问题的深度探讨

在现代嵌入式系统开发中&#xff0c;STM32系列微控制器因其高性能、低功耗和丰富的外设资源而广受欢迎。然而&#xff0c;开发者在使用STM32时可能会遇到一个问题&#xff1a;当微控制器进入待机模式后&#xff0c;无法通过调试接口&#xff08;如SWD或JTAG&#xff09;下载程序…...

进程、线程、进程间通信Unix Domain Sockets (UDS)

进程、线程、UDS 进程和线程进程间通信Unix Domain Sockets (UDS)UDS的核心适用场景和用途配置UDS的几种主要方式socketpair() 基本配置流程socketpair() 进阶——传递文件描述符 补充socketpair() 函数struct msghdr 结构体struct iovecstruct cmsghdrstruct iovec 、struct m…...

大数据平台与数据仓库的核心差异是什么?

随着数据量呈指数级增长&#xff0c;企业面临着如何有效管理、存储和分析这些数据的挑战。 大数据平台和 数据仓库作为两种主流的数据管理工具&#xff0c;常常让企业在选型时感到困惑&#xff0c;它们之间的界限似乎越来越模糊&#xff0c;功能也有所重叠。本文旨在厘清这两种…...

Hadoop虚拟机中配置hosts

&#xff08; 一&#xff09;修改虚拟机的主机名 默认情况下&#xff0c;本机的名称叫&#xff1a;localhost。 我们进入linux系统之后&#xff0c;显示出来的就是[rootlocalhost ~]# 。为了方便后面我们更加便捷地访问这台主机&#xff0c;而不是通过ip地址&#xff0c;我们要…...

a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt

实现下面的上传/下载/删除功能&#xff1a;要求支持&#xff1a;【.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt】 分析上面的效果图&#xff0c;分为【上传】按钮和【文件列表】功能&#xff1a; 解决步骤1&#xff1a;上传按钮 直接上代码&#xff1a; <a-uploadmultip…...

QCefView应用和网页的交互

一、demo的主要项目文件 结合QCefView自带的demo代码 main.cpp #include #include <QCefContext.h> #include “MainWindow.h” int main(int argc, char* argv[]) { QApplication a(argc, argv); // build QCefConfig QCefConfig config; config.setUserAgent(“QCef…...