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

来源:互联网 发布:婚纱胸贴哪种好用 知乎 编辑:程序博客网 时间:2024/06/09 14:03

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来确定。


0 0
原创粉丝点击