day15-Incrementing counter（平台关注量计数动态显示）

格式化小拓

已于 2023-07-16 20:52:00 修改

阅读量53

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-07-10 20:56:20 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131647705

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day15-Incrementing counter（平台关注量计数动态显示）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <title>Increment Counter</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 每一项 -->
    <div class="counter-container">
        <!-- 图标 -->
        <i class="fab fa-twitter fa-3x"></i>
        <!-- 数量 -->
        <div class="counter" data-target="18000"></div>
        <!-- 文本 -->
        <span>Twitter Followers</span>
    </div>
    <!-- 每一项 -->
    <div class="counter-container">
        <i class="fab fa-youtube fa-3x"></i>
        <div class="counter" data-target="6000"></div>
        <span>YouTube Subscribers</span>
    </div>
    <!-- 每一项 -->
    <div class="counter-container">
        <i class="fab fa-facebook fa-3x"></i>
        <div class="counter" data-target="9500"></div>
        <span>Facebook Fans</span>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

/* 引入字体 */
* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(to right,
            skyblue,
            lightblue);
    color: #fff;
    font-family: 'Roboto Mono', sans-serif;
    /* 居中显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 每一项 */
.counter-container {
    /* 居中对齐 */
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 30px 50px;
}

/* 计数 */
.counter {
    font-size: 60px;
    margin-top: 10px;
}

/* 字体图标 阴影 */
.fab {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

/* 媒体查询 <=580px,时三项竖直排列 */
@media (max-width: 580px) {
    body {
        flex-direction: column;
    }
}

script.js

// 重点是 flex 函数  定时器 自定义属性的应用

// 1.获取元素节点
const counters = document.querySelectorAll('.counter');//数量显示
// 2.
counters.forEach(counter => {
    counter.innerText = '0'
    // 动态显示数量的变化
    const updateCounter = () => {
        // 从计数器的属性 data-target 中获取目标值，并将其转换为数字类型。
        const target = +counter.getAttribute('data-target')
        // 获取当前计数器的文本内容，并将其转换为数字类型。
        const c = +counter.innerText
        // 计算每次增加的增量值，通过将目标值除以 200 来获得平均每次增加的数量。
        const increment = target / 200
        // 如果当前值<目标值
        if (c < target) {
            // 如果当前计数器的值小于目标值，则将计数器的文本内容设置为当前值加上增量值，
            counter.innerText = `${Math.ceil(c + increment)}`
            // 并通过 setTimeout 函数延迟 1 毫秒后再次调用 updateCounter 函数，实现动态更新的效果。
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }
    // 调用
    updateCounter()
})