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

最新推荐文章于 2024-08-14 10:15:39 发布

Kissablecho

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量730

点赞数 9

文章标签： html css javascript

本文链接：https://blog.csdn.net/y223421/article/details/140560286

版权

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

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

效果

{% video “https://assets.buasis.eu.org/posts/Posts-打字机效果的-Hitokoto（html-css-js）/21-17-37.mp4” %}

讲

文本将写在<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 currentIndex = 0;
        let charIndex = 0;
        let isDeleting = false;
        let hitokotoText = '';

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

        function typeWriter() {
            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;
                fetchHitokoto();
            }

            const speed = isDeleting ? deletingSpeed : typingSpeed;
            setTimeout(typeWriter, speed);
        }

        function fetchHitokoto() {
            fetch('https://v1.hitokoto.cn')
                .then(response => response.json())
                .then(data => {
                    hitokotoText = data.hitokoto;
                    typeWriter();
                })
                .catch(console.error);
        }

        fetchHitokoto();
    </script>
</body>
</html>