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.

相关推荐
纪元A梦9 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
钢铁男儿12 分钟前
C# 深入理解类:面向对象编程的核心数据结构
开发语言·数据结构·c#
会飞的鱼先生12 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了12 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
Doker 多克37 分钟前
Python-Django系列—部件
开发语言·python
海底火旺38 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺39 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码39 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
江沉晚呤时1 小时前
深入解析 ASP.NET Core 中的 ResourceFilter
开发语言·c#·.net·lucene
huangyuchi.1 小时前
【C++11】Lambda表达式
开发语言·c++·笔记·c++11·lambda·lambda表达式·捕捉列表