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.

相关推荐
future14121 小时前
C#学习日记
开发语言·学习·c#
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
king_harry1 小时前
Java程序-OceanBase Connector/J 示例
开发语言
前端风云志1 小时前
TypeScript结构化类型初探
javascript
傻啦嘿哟2 小时前
Python 办公实战:用 python-docx 自动生成 Word 文档
开发语言·c#
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
q567315232 小时前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说3 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb