文字打字机效果，可换字体样式

Posted 2020-10-01 壁虎漫步.

<div id="text">你好，欢迎光临，今天是个好日子！</div>
<script>
    $(function() {
        daziji("#text", 150); //调用打字机函数
    })
</script>

js

function daziji(dazijiDiv, dazijiTime) {
    var text1 = $(dazijiDiv).text(),
        text2 = text1,
        lentext = text2.length,
        textArray = text2.split("");
    $(dazijiDiv).empty();
    for (i = 0; i < text2.length; i++) {
        $(dazijiDiv).append(‘<span style="display:none">‘ + textArray[i] + ‘</span>‘);
    }
    dazijiShow(dazijiDiv, lentext, dazijiTime);
}
var dazijiN = 0;

function dazijiShow(d, e, f) {
    $(d).children("span").eq(dazijiN).show().css({
        color: ‘#‘ + Math.floor(Math.random() * 16777215).toString(16)
    });
    if (dazijiN < e) {
        dazijiN++;
        setTimeout("dazijiShow(‘" + d + "‘," + e + "," + f + ")", f)
    } else {
        dazijiN = 0;
        setTimeout("dazijiShow(‘" + d + "‘," + e + "," + f + ")", f);
    };

}