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>
相关推荐
RadiumAg26 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo30 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw53 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app