首页 > 逐字逐行显示8句话用javascript实现

逐字逐行显示8句话用javascript实现

具体的这样的,比如我有8句话,每句话都是逐字出现的,当第一句话显示完成后,就显示第二句话,第二句话完成后,开始显示第三句话,以此类推。

把显示的功能写成一个函数

显示每句话的时候,调用一次函数,并把要显示的是那句话作为参数传入到函数中。

要显示的八句话分别是:

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

不是一次性的显示完8句话,而是有事件触发了才会显示其中的一条语句。两句话,为一组。也就是w1和w2为一组,显示完成了w1就显示w2.

大家有什么好的思路,智商不够用……


http://gabinaureche.com/TheaterJS/


最简单的:弄个全局数组,用以保存待显示的队列,然后逐条显示


jsfunction Printer(delay) {
    this.timer = null;
    this.output = '';
    this.delay = delay;
    this.now = 0;
}

Printer.prototype = {
    constructor: Printer,
    print: function (word) {
        if (!word) return;

        var that = this;
        that.output += word;

        if (!that.timer) {
            that.timer = setInterval(function () {
                that._render(that.output.charAt(that.now));
                if (++that.now === that.output.length) {
                    clearInterval(that.timer);
                    that.now = 0;
                    that.ouput = '';
                }
            }, that.delay);
        }
    },
    _render: function (word) {
        console.log(word);
    }
};

var p = new Printer(400);

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

p.print(w1);
p.print(w2);
p.print(w3);
p.print(w4);
p.print(w5);
p.print(w6);
p.print(w7);
p.print(w8);

简单的实现了一下,大概能满足你的需求吧?

【热门文章】
【热门文章】