逐字显示，并使用callback显示下一行

fonglezen

于 2015-01-29 10:48:59 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小思文章标签： callback

本文链接：https://blog.youkuaiyun.com/wuweitiandian/article/details/43267951

前端小思专栏收录该内容

43 篇文章

订阅专栏

这篇博客探讨了如何在HTML中实现逐字显示内容，并利用callback函数在显示完一行后无缝过渡到下一行。通过理解回调的概念，读者可以学习到动态更新DOM的方法，以创建更具交互性的网页效果。

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

HTML结构：

<p id="w1"></p>
<p id="w2"></p>

JS实现：

/* lines words */
        var w1 = '时光是琥珀',
            w2 = '泪一滴滴被反锁'
            w3='情书再不朽',
            w4='也磨成沙漏',
            w5='青春的上游',
            w6='白云飞走苍狗与海鸥',
            w7='闪过的念头',
            w8='潺潺的溜走';


        /* show page 1 words */
        showWord(w1,document.getElementById('w1'),0,function(){
            showWord(w2,document.getElementById('w2'),0,null);
        });

        /* show function */
        function showWord(word,objID,i,callback){
            var wlen = word.length;
            objID.innerHTML += word[i];
            i++;

            setTimeout(function(){
                if(i < wlen) {
                    showWord(word, objID, i, callback);
                }else if(i == wlen){
                    callback();
                }
            },300);


        }

上面的功能就是逐行逐字显示文字，当显示完一条之后，要显示的下一句话可以通过callback来确定。