前端实现打字效果

Bunny0212

已于 2023-10-10 23:28:58 修改

阅读量326

点赞数

分类专栏：前端文章标签：前端 js

于 2023-09-16 19:24:35 首次发布

本文链接：https://blog.csdn.net/weixin_46533577/article/details/132922488

版权

前端专栏收录该内容

89 篇文章 0 订阅

订阅专栏

前端实现打字效果

不带光标

只一次播放

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    }
}

无线播放

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

(function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    } else {
        typingEffect.textContent = "";
        index = 0;
        setTimeout(typeNextCharacter, typingSpeed);
    }
})();

在这里插入图片描述

带光标

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}
#typing::after {
    position: absolute;
    content: "|";
    animation: typing 1s linear infinite;
}

@keyframes typing {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    } 
}

typeNextCharacter();