网页实现输入文本的打字机效果

可以通过以下的 HTML、CSS 和 JavaScript 代码实现输入文本的打字机效果。

HTML 代码：

<div class="typing-container">
  <p id="typing-text"></p>
</div>

CSS 代码：

.typing-container {
  font-size: 24px;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  padding: 10px;
  width: 500px;
  height: 200px;
  overflow: auto;
}

#typing-text {
  padding: 5px;
  margin: 0;
}

JavaScript 代码：

const text = "这是一段需要打字机效果的文本。";
const typingText = document.getElementById("typing-text");
let index = 0;

function type() {
  typingText.innerHTML += text[index];
  index++;
  if (index >= text.length) {
    clearInterval(typingInterval);
  }
}

const typingInterval = setInterval(type, 100);

以上代码实现了在一个 `div` 元素中显示一段文本，然后通过 JavaScript 代码逐个字符地将文本添加到 `p` 元素中，从而实现了打字机效果。