急速遞增的數字動畫｜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