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

打字机效果的 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>

效果

讲

完整源码

参考资料