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

项目场景:

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

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

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


分析:

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

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

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

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


解决方案:

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

html 复制代码
<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>
相关推荐
EndingCoder1 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手1 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评1 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组1 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg5 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz6 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码7 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v7 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山7 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin8 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack