一尘子、道法自然、博客园、前端

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>
转自：https://www.cnblogs.com/suanshu/p/7346584.html
posted @ 2022-02-16 14:36  一尘子!  阅读(226)  评论(0)    收藏  举报
Live2D
返回顶端