JavaScript - 一个好玩的打字动画

效果预览:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>打字动画示例</title>
    <style>
        .typewriter {
            color: #000;
            overflow: hidden; /* 隐藏溢出的文本 */
            white-space: nowrap; /* 不换行 */
            border-right: .15em solid #000; /* 添加光标样式 */
            animation: blink-caret .75s step-end infinite;
        }

        /* 光标闪烁 */
        @keyframes blink-caret {
            from, to {
                border-color: transparent
            }
            50% {
                border-color: #000
            }
        }
    </style>

    <script>
        // 页面加载完成后执行
        window.onload = function () {
            // 获取文本节点
            var textNode = document.getElementById('text');

            // 获取文本内容
            var text = textNode.innerHTML;

            // 清空文本内容
            textNode.innerHTML = '';

            // 逐个显示字符的定时器
            setTimeout(() => {
                var timer = setInterval(function () {
                    // 检查是否已显示完全部字符
                    if (text.length <= 0) {
                        clearInterval(timer);
                        textNode.classList.remove('typewriter');
                        return;
                    }

                    // 取出第一个字符并在页面上显示
                    var char = text.substring(0, 1);
                    textNode.innerHTML += char;
                    // 移除已显示的字符
                    text = text.substring(1);
                }, 50);
            }, 2000);
        };
    </script>
</head>
<body>
<div>
    <span id="text" class="typewriter">横向领域和垂直领域是两个在不同层面上对领域或行业的分类方式。</span>
</div>
</body>
</html>

END.

相关推荐
水w1 小时前
【Android Studio】解决报错问题Algorithm HmacPBESHA256 not available
android·开发语言·android studio
冷琅辞1 小时前
Elixir语言的云计算
开发语言·后端·golang
记得早睡~1 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
Mryan20052 小时前
解决GraalVM Native Maven Plugin错误:JAVA_HOME未指向GraalVM Distribution
java·开发语言·spring boot·maven
Naomi5212 小时前
自定义汇编语言(Custom Assembly Language) 和 Unix & Git
服务器·开发语言·git·unix
烂蜻蜓2 小时前
C 语言命令行参数:让程序交互更灵活
c语言·开发语言·交互
zm-v-159304339862 小时前
解锁 DeepSeek 与 Matlab:攻克科研难题的技术利刃
开发语言·matlab·信息可视化
ylfhpy2 小时前
Java面试黄金宝典33
java·开发语言·数据结构·面试·职场和发展·排序算法
照书抄代码2 小时前
C++11可变参数模板单例模式
开发语言·c++·单例模式·c++11
No0d1es2 小时前
CCF GESP C++编程 四级认证真题 2025年3月
开发语言·c++·青少年编程·gesp·ccf·四级·202503