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

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

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

背景

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

最终效果

1、添加 iconfont 图标库

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

2、添加 HTML 文件

添加一层最外层的类名为 counter-container 的 <div>
counter-container 里面再添加一层类名为 iconfont icon-xinlangweibo 的 <i>
counter-container 里面添加一层类名为 counter 的 div
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>
复制代码

3、添加 CSS 文件

先初始化页面github

设置 * 为 box-sizing: border-box
设置 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 代码
markdown

移动端适配

使用 @media 完成移动端适配
设置最大宽度小于 580px 时触发
触发后的 一行显示改成一列显示 ，代码为 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;
    }
}
复制代码

4、添加 JS 文件

主要逻辑函数

经过 document.querySelectorAll('.counter')，获取 .counter 节点
经过 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();
})
复制代码

❤️ 感谢你们

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

若是你喜欢这篇文章的话，能够「点赞」 + 「收藏」 + 「转发」给更多朋友。post