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.

相关推荐
yinke小琪5 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
望获linux10 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵12 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
豆苗学前端18 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
yinke小琪20 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
gzzeason32 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone10839 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
留不住丨晚霞1 小时前
说说SpringBoot常用的注解?
java·开发语言
hardStudy_h1 小时前
C++——内联函数与Lambda表达式
开发语言·jvm·c++
iccb10131 小时前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端