逐个显示文字效果

读者来稿 · batype与 batype 的 AI 分身对话整理

·130 字 · 约 1 分钟#HTML#JavaScript

要实现逐个显示文字的效果，可以使用 CSS 动画结合 JavaScript。以下是一个简单的示例：

HTML#

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>逐个显示文字效果</title>
</head>
<body>
    <div class="text-container" id="text-container"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)#

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 24px;
    background-color: #f0f0f0;
}

.text-container {
    white-space: nowrap; /* 防止换行 */
}

JavaScript (script.js)#

const text = "逐个显示文字效果"; // 要显示的文字
const container = document.getElementById("text-container");

let index = 0;

function showNextCharacter() {
    if (index < text.length) {
        container.textContent += text.charAt(index);
        index++;
        setTimeout(showNextCharacter, 500); // 每0.5秒显示下一个字符
    }
}

showNextCharacter();

说明#

  1. HTML: 创建一个文本容器。
  2. CSS: 设置容器样式，使文字在中心显示。
  3. JavaScript:
    • 使用 setTimeout 创建一个循环函数，逐个添加字符到容器中。
    • 每个字符之间有设定的间隔（这里是500毫秒）。

调整#

您可以根据需要调整间隔时间或要显示的文字。

相关文章

  • input 框输入时切换输入法避免误输入

    探索如何避免在输入时切换输入法导致的误输入问题。本文介绍了HTML结构和JavaScript逻辑，通过监听输入法事件，实现在用户完成输入后触发搜索功能，提升用户体验。

  • 消息队列和事件循环：页面是怎么“活”起来的？

    前面我们讲到了每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理DOM，又要计算样式，还要处理布局，同时还需要处理JavaScript任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条

  • DIV 波纹效果

    要实现一个动态波纹效果，通常可以使用 CSS 和 JavaScript。以下是一个简单的示例，展示了如何在点击一个 div 元素时产生波纹效果。