JavaScript 来实现打字效果

可以使用 HTML 和 JavaScript 来实现打字效果。

1. 首先，在 HTML 中创建一个文本框，用于输入要模拟的文本内容。

代码语言：html复制

<input type="text" id="input-text">

1. 接下来，在 HTML 中创建一个空的 <p> 标签，用于显示打字效果。

代码语言：html复制

<p id="output-text"></p>

1. 在 JavaScript 中，获取输入文本框和输出文本标签的引用，并定义一个计数器变量。

代码语言：javascript复制

let inputText = document.getElementById("input-text").value;
let outputText = document.getElementById("output-text");
let counter = 0;

1. 然后，我们可以使用 setInterval() 函数来定时向输出标签中添加字符，直到达到输入文本的长度为止。

代码语言：javascript复制

setInterval(function() {
    if (counter < inputText.length) {
        outputText.innerHTML  = inputText.charAt(counter);
        counter  ;
    }
}, 100); // 100ms 为每个字符之间的时间间隔，可以调整

这段代码会在每个 100 毫秒执行一次，将输入文本的一个字符添加到输出标签中，直到计数器等于输入文本的长度为止。

完整的示例代码如下：

代码语言：html复制

<input type="text" id="input-text">
<p id="output-text"></p>

<script>
    let inputText = document.getElementById("input-text").value;
    let outputText = document.getElementById("output-text");
    let counter = 0;

    setInterval(function() {
        if (counter < inputText.length) {
            outputText.innerHTML  = inputText.charAt(counter);
            counter  ;
        }
    }, 100); // 100ms 为每个字符之间的时间间隔，可以调整
</script>

注意，在实际的应用中，我们可能需要添加一些样式或者事件处理来提高用户体验。

javascript

0 人点赞