JS让文本以打字效果呈现出来

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30809173

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suanshu/p/7346584.html

本文介绍了一个简单的JavaScript特效，能够使网页上的文本以模仿打字的方式逐字显示，附带了完整的代码实现及运行效果。

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

简单的网页特效：JS让文本以打字效果呈现出来

代码如下：

<!DOCTYPE HTML>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>javaScript让文本像打字一样输出</title>
        </head>
        <body>
                <span id="demo"></span>
        </body>
        <script language="JavaScript">
                //预设的文字
                var text = '登岳阳楼<br>'
                         + '唐代：杜甫<br>'
                         + '昔闻洞庭水，今上岳阳楼。<br>'
                         + '吴楚东南坼，乾坤日夜浮。<br>'
                         + '亲朋无一字，老病有孤舟。<br>'
                         + '戎马关山北，凭轩涕泗流。<br>' ;
                
                //文字出现的时间间隔
                var delay = 80 ;            
                //初始化变量 i
                var i = 0 ;
                function writeText(){
                        var demo = document.getElementById('demo');
                        //设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
                        demo.innerHTML = text.slice(0,i++) + "_" ; 
                        
                        if ( i > text.length ) { //当 i 大于 text 的文本长度时
                              i = 0 ; //重设 i 为 0，使文字重新从第一个文字出现

                              //延时执行writeText()函数,5秒时候重新执行
                              setTimeout("writeText()",5000) ;
                              
                        } else {
                              //否则在delay毫秒后再次执行writeText()函数
                              setTimeout("writeText()",delay) ;      
                        }
                }
                
                writeText() ;//调用writeText()函数
        </script>
</html>