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>
相关推荐
mCell13 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip13 小时前
Node.js 子进程:child_process
前端·javascript
excel16 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel17 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css
白水清风19 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix20 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780020 小时前
new、原型和原型链浅析
前端·javascript