Ksable' 小屋

首页留言板
友链关于

# Posts: 打字机效果的 Hitokoto（html+css+js）

发表于 2024-07-19 21:14
更新于 2024-07-19 21:14
524 字
3 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 文章

4 分类

7 标签
首页
留言板
分类
标签
归档
友链
关于
一些实用的网站
astro-koharu 使用指南
歌单
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸
打字机效果的 Hitokoto（html+css+js） {% media video %} url: "https://assets.buasis.eu.org/posts/Posts-打字机效果的-Hitokoto（html-css-js）/21-17-37.mp4" {% endmedia %} 文本将写在里 JavaScript 中 完整源码

打字机效果的 Hitokoto（html+css+js）

## 效果

## 讲

文本将写在`<span class="text" id="hitokoto_text">:D 获取中...</span>`里

JavaScript 中

    const typingSpeed = 180; // 定义打字速度（毫秒）
    const deletingSpeed = 100; // 定义删除速度（毫秒）
    const delayBetweenCycles = 2500; // 在句子完成显示和删除之前的延迟时间（毫秒）

## 完整源码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>打字机效果的 Hitokoto</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(43, 52, 82);
            }
            .text {
                font-family: 'fangsong';
                display: inline-block;
                position: relative;
                font-size: 40px;
                height: 60px;
                line-height: 60px;
                color: rgb(245, 245, 245);
            }
            .text::after {
                content: '';
                position: absolute;
                right: -10px;
                top: 5px;
                height: 50px;
                width: 3px;
                background-color: #fff;
                animation: blink 0.5s steps(1) infinite;
            }
            @keyframes blink {
                0%, 100% {
                    background-color: #fff;
                }
                50% {
                    background-color: transparent;
                }
            }
        </style>
    </head>
    <body>
        <h1>
            <span class="text" id="hitokoto_text">:D 获取中...</span>
        </h1>
        <script>
            const textElement = document.querySelector('.text');
            let charIndex = 0;
            let isDeleting = false;
            let hitokotoText = '';
            let typingInterval;
            const typingSpeed = 180; // 定义打字速度（毫秒）
            const deletingSpeed = 100; // 定义删除速度（毫秒）
            const delayBetweenCycles = 2500; // 在句子完成显示和删除之前的延迟时间（毫秒）

            function typeWriter() {
                if (!shouldRunEffect()) {
                    clearInterval(typingInterval);
                    return;
                }
                if (isDeleting) {
                    textElement.innerHTML = hitokotoText.slice(0, charIndex--);
                } else {
                    textElement.innerHTML = hitokotoText.slice(0, ++charIndex);
                }
                if (!isDeleting && charIndex === hitokotoText.length) {
                    setTimeout(() => isDeleting = true, delayBetweenCycles);
                } else if (isDeleting && charIndex === 0) {
                    isDeleting = false;
                    clearInterval(typingInterval);
                    fetchHitokoto();
                    return;
                }
                const speed = isDeleting ? deletingSpeed : typingSpeed;
                typingInterval = setTimeout(typeWriter, speed);
            }

            function fetchHitokoto() {
                if (!shouldRunEffect()) return;
                fetch('https://v1.hitokoto.cn')
                    .then(response => response.json())
                    .then(data => {
                        hitokotoText = data.hitokoto;
                        var consoleQuote = hitokotoText;
                        charIndex = 0;
                        typeWriter();
                        console.log(`%c✨ ${consoleQuote}`,"font-size:20px; background:rgba(225,225,225,0); color:#3aaacf;padding:10px; border: 3px solid #3aaacf;border-radius:10px;");
                    })
                    .catch(error => {
                        console.error(error);
                        hitokotoText = "获取失败 ε(┬┬﹏┬┬)3";
                        charIndex = 0;
                        errortypeWriter();
                    });
            }

            function errortypeWriter() {
                typingInterval = setInterval(() => {
                    textElement.innerHTML = hitokotoText.slice(0, ++charIndex);
                    if (charIndex === hitokotoText.length) {
                        clearInterval(typingInterval);
                    }
                }, typingSpeed);
            }

            function shouldRunEffect() {
                // 可以在这排除一些页面
                // const currentPath = window.location.pathname;
                // return currentPath === '/' || currentPath === '/archives/';
                return true
            }

            // 使用 addEventListener 监听 load 事件
            document.addEventListener('DOMContentLoaded', function() {
                fetchHitokoto();
            });

            volantis.pjax.push(() => {
                if (shouldRunEffect()) {
                    fetchHitokoto();
                } else {
                    clearInterval(typingInterval);
                    textElement.innerHTML = ''; // Optional: Clear the text when the effect is stopped
                }
            });
        </script>
    </body>
    </html>

## 参考资料

1. 打字机效果 html+css+js
2. 语句接口 - 一言

喜欢的话，留下你的评论吧～

中文
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 文章

4 分类

7 标签
首页
留言板
分类
标签
归档
友链
关于
一些实用的网站
astro-koharu 使用指南
歌单
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸