子比主题 – 逐字公告小工具-语初博客

文章最后更新时间：2025-11-08 17:21:38

AI 摘要

YUCHUGPT

刷新

这篇文章介绍了一个循环显示公告的打字效果小工具，具有循环显示和平滑过渡功能。用户可以配置参数如打字速度、显示时间、擦除速度等。文章中通过 HTML 和 CSS 代码展示了实现效果，包括公告文本容器、打字光标和图标区域等。通过简洁的设计和动画效果，实现了公告的连续显示和切换，提升了用户体验。

看到一篇子比主题最新发布和逐字公告小工具的文章，然后用 ai 改了一下

介绍

循环显示功能：第一个公告显示完成后，会自动擦除并显示第二个公告，之后再回到第一个公告，形成无限循环

平滑过渡：每个公告显示后会停留一段时间（默认 3 秒），然后平滑擦除，再显示下一个公告

可配置参数：typingSpeed：打字速度（毫秒 / 字）displayDuration：每个公告完整显示后的停留时间 eraseSpeed：擦除文字的速度 cursorBlinkSpeed：光标闪烁速度

外观-小工具-自定义 HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环显示公告的打字效果</title>
    <style>
        /* 基础样式 */
        .wapnone {
            padding: 20px;
        }
        .file-format {
            padding: 10px 20px;
            height: auto;
            min-height: 38px;
            background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        span.txt-file-format {
            font-size: 13px;
            font-weight: 700;
            color: var(--main-color, #333);
            line-height: 18px;
            margin-right: 17px;
            min-width: 240px;
            display: inline-block;
            white-space: pre-line;
        }
        /* 打字光标样式 */
        .typed-cursor {
            font-size: 13px;
            color: var(--main-color, #333);
            vertical-align: baseline;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        /* 图标样式 */
        .file-format-icons {
            display: flex;
            align-items: center;
        }
        i.icon_ps[data-v-2775696c],
        i.icon_ai[data-v-2775696c],
        i.icon_sketch[data-v-2775696c],
        i.icon_3dMax[data-v-2775696c],
        i.icon_cdr[data-v-2775696c],
        i.icon_c4d[data-v-2775696c],
        i.icon_blender[data-v-2775696c] {
            width: 26px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 9px;
        }
        i.icon_ps[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-ps.svg) no-repeat 50% / 100%; }
        i.icon_ai[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-ai.svg) no-repeat 50% / 100%; }
        i.icon_sketch[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-sketch.svg) no-repeat 50% / 100%; }
        i.icon_3dMax[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-3dMax.svg) no-repeat 50% / 100%; }
        i.icon_cdr[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-cdr.svg) no-repeat 50% / 100%; }
        i.icon_c4d[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-c4d.svg) no-repeat 50% / 100%; }
        i.icon_blender[data-v-2775696c] { background: url(https://www.macgf.com/img/icon-blender.svg) no-repeat 50% / 100%; }
    </style>
</head>
<body>
    <div class="wapnone">
        <div class="file-format" data-v-2775696c="">
            <!-- 公告文本容器 -->
            <span id="index-xtips" class="txt-file-format" data-v-2775696c=""></span>
            <!-- 打字光标 -->
            <span class="typed-cursor typed-cursor--blink" aria-hidden="true">|</span>
            <!-- 图标区域 -->
            <span class="file-format-icons" data-v-2775696c="">
                <i class="icon_ps" data-v-2775696c=""></i>
                <i class="icon_ai" data-v-2775696c=""></i>
                <i class="icon_sketch" data-v-2775696c=""></i>
                <i class="icon_3dMax" data-v-2775696c=""></i>
                <i class="icon_cdr" data-v-2775696c=""></i>
                <i class="icon_c4d" data-v-2775696c=""></i>
                <i class="icon_blender" data-v-2775696c=""></i>
            </span>
        </div>
    </div>

    <script>
        // 1. 定义要循环显示的公告
        const announcements = [
            "公告一：按照用户要求，本站已取消频繁的通知提示。",
            "公告二：新功能预告：我们即将上线素材批量下载功能，敬请期待！"
        ];
        
        // 配置参数
        const config = {
            typingSpeed: 120,       // 打字速度（毫秒/字）
            displayDuration: 3000,  // 每个公告显示时间（毫秒）
            eraseSpeed: 50,         // 删除速度（毫秒/字）
            cursorBlinkSpeed: 1000  // 光标闪烁速度（毫秒）
        };

        // 获取DOM元素
        const textContainer = document.getElementById("index-xtips");
        const cursor = document.querySelector(".typed-cursor");

        // 当前显示的公告索引
        let currentAnnouncementIndex = 0;
        
        // 2. 打字效果函数
        function typeText(text, container, speed) {
            return new Promise((resolve) => {
                let currentChar = 0;
                container.textContent = "";
                
                const typingInterval = setInterval(() => {
                    if (currentChar < text.length) {
                        container.textContent += text[currentChar];
                        currentChar++;
                    } else {
                        clearInterval(typingInterval);
                        resolve();
                    }
                }, speed);
            });
        }
        
        // 3. 擦除效果函数
        function eraseText(container, speed) {
            return new Promise((resolve) => {
                const currentText = container.textContent;
                let currentChar = currentText.length;
                
                const erasingInterval = setInterval(() => {
                    if (currentChar > 0) {
                        currentChar--;
                        container.textContent = currentText.substring(0, currentChar);
                    } else {
                        clearInterval(erasingInterval);
                        resolve();
                    }
                }, speed);
            });
        }
        
        // 4. 循环显示公告的主函数
        async function cycleAnnouncements() {
            // 显示当前公告
            await typeText(announcements[currentAnnouncementIndex], textContainer, config.typingSpeed);
            
            // 停留指定时间
            await new Promise(resolve => setTimeout(resolve, config.displayDuration));
            
            // 擦除当前公告
            await eraseText(textContainer, config.eraseSpeed);
            
            // 切换到下一个公告（循环）
            currentAnnouncementIndex = (currentAnnouncementIndex + 1) % announcements.length;
            
            // 递归调用，实现循环
            cycleAnnouncements();
        }

        // 5. 页面加载完成后启动循环
        window.addEventListener("load", () => {
            cycleAnnouncements();
        });
    </script>
</body>
</html>

本站代码模板仅供学习交流使用请勿商业运营, 严禁从事违法, 侵权等任何非法活动, 否则后果自负！

点击复制

本文作者

语初

本文链接

许可协议

CC BY-NC-SA 4.0

复制成功

THE END