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>
相关推荐
北海-cherish1 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909062 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist3 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang4 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_4 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含4 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端4 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友4 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端