JavaScript 来实现打字效果

原创

用户3455053

发布于 2023-06-13 23:24:57

1.1K0

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

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

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

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

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

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

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

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

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

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

完整的示例代码如下：

<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>

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

登录后参与评论

0 条评论

热度

JavaScript 来实现打字效果

JavaScript 来实现打字效果

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐