急速递增的数字动画｜8月更文挑战

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

很多认为 数字递增或递减动画 在没有学习的必要，因为在生活中不常出现。但如果我们真的留心观察过我们生活中使用过的 软件、看过的 网站 就可以轻易发现，数字递增或递减动画 在我们的生活中随处可见，比如 展示双 11 当天成交额、加载页面进度条、大数据可视化 ......

最终效果

一、添加 iconfont 图标库

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2722714_di82ncrz5r.css">

二、添加 HTML 文件

1. 添加一层最外层的类名为 counter-container 的 <div>
2. counter-container 里面再添加一层类名为 iconfont icon-xinlangweibo 的 <i>
3. counter-container 里面添加一层类名为 counter 的 div
4. counter-container 里面添加一层 <span>

<div class="counter-container">
    <i class="iconfont icon-xinlangweibo"></i>
    <div class="counter" data-target="14399"></div>
    <span>xinlang Followers</span>
</div>

<div class="counter-container">
    <i class="iconfont icon-youtube"></i>
    <div class="counter" data-target="5600"></div>
    <span>YouTube Subscribers</span>
</div>

<div class="counter-container">
    <i class="iconfont icon-bilibili"></i>
    <div class="counter" data-target="7370"></div>
    <span>bilibili Followers</span>
</div>

三、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 body 来使整个项目居中

* {
    box-sizing: border-box;
}

body {
    background-color: #00a1d6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

主要的 CSS 代码

• 移动端适配

1. 使用 @media 完成移动端适配
2. 设置最大宽度小于 580px 时触发
3. 触发后的 一行显示改为一列显示 ，代码为 flex-direction: column

.iconfont {
    font-weight: 400;
    display: block;
    font-size: 60px;
}
.counter-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 30px 50px;
}

.counter {
    font-size: 60px;
    margin-top: 10px;
}

@media (max-width: 580px) {
    body {
        flex-direction: column;
    }
}

四、添加 JS 文件

主要逻辑

1. 通过 document.querySelectorAll('.counter')，获取 .counter 节点
2. 通过 forEach 遍历来 初始化数字的值为0 ，获取每个 data-target 属性的值，调用函数 updateCounter ，最终实现数字递增效果

const counters = document.querySelectorAll('.counter')

counters.forEach(counter => {
    counter.innerText = '0'

    const updateCounter = () => {
        const target = + counter.getAttribute('data-target')
        const c = + counter.innerText

        const increment = target / 200

        if (c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }

    updateCounter();
})

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。