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

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .number {
        font-size: 50px;
        color: palegreen;
    }
</style>

<body>
    <div class="number" data-target="5000"></div>
    <div class="number" data-target="1236"></div>
    <div class="number" data-target="6666"></div>
</body>
<script>
    // 获取所有的dom,querySelectorAll为为数组
    const numbers = document.querySelectorAll('.number')
    console.log("🚀 ~ file: css数字从0到指定数值.html:23 ~ numbers:", numbers)
    numbers.forEach(counter => {
        counter.innerText = 0;
        const upDateNumber = () => {
            // 获取每个类名为number的data-target,即获取最大值 
            const target = Number(counter.getAttribute('data-target'))

            // 获取当前div的数值
            const d = Number(counter.innerText)

            // 设置数据增加的值,可以通过target除的数值确定怎么加数值的快慢
            const increment = target / 200

            // 当数字小于最大值时,执行下面的操作
            if (d < target) {
                // 向上取整
                counter.innerText = `${Math.ceil(d + increment)}`
                // 1ms重新调用,不然它会在第一次运行完就结束
                setTimeout(upDateNumber, 1)
            } else {
                counter.innerText = target
            }
        }
        upDateNumber()
    })
</script>

</html>
相关推荐
王源骏24 分钟前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码38 分钟前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby1 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹1 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel1 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh1 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的2 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人2 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw52 小时前
移动端调试上篇
前端