JavaScript/JS 实现文字逐个显示延迟缓慢展示_js 延迟显示文字怎么设置-CSDN博客

本文链接：https://blog.csdn.net/qq_34626094/article/details/113128758

本文介绍了如何使用JavaScript实现文字逐个显示的功能。通过oneByOne函数递归调用来每250毫秒更新屏幕上的文字，达到文字逐渐显示的效果。代码中还展示了如何直接使用ID改变值的简便语法。如果希望文字显示完毕后重新开始，只需将返回语句改为重置count为0。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将以下代码保存为html文件后，在浏览器打开即可看到效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>
        js实现文字逐渐显示
    </title>
    <script type="text/javascript">
        var paper = "真的学渣 | 敢于面对惨淡的成绩 | 敢于正视辅导员的双眸 . . .";
        var count = 1;
        function oneByOne()
        {
            var screen = paper.substr(0, count);
            loopText.innerHTML = screen;   
            count++;
            if (count > paper.length)
                return;
            setTimeout(oneByOne, 250);
        }
        onload = oneByOne;
    </script>
    <style type="text/css">
        #test {
            position:absolute;
            right:15em;
            top:1em;
            width:1px;              
        color:#ff0000;
            font-size:20px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div id="test">
        <p id="loopText"></p>
    </div>
</body>
</html>

如果你也像我样是菜鸟, 那我就啰嗦几句.上面处于无聊,加了一些css, 与功能无关.

文字逐个显示是通过oneByOne函数的递归调用实现的, 每250毫秒更新一次. 每更行一次多加一个字.

若想显示完再次重头开始的话, 可以将js代码if内的语句由return改为count=0;

最后请注意15行的用法,直接使用id来改变值, 很实用的语法, 比jquery都简便, 我也是才知道.

转载：js实现文字逐个显示 - 微温的便当 - 博客园