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

最新推荐文章于 2025-08-18 23:32:25 发布

weixin_30846599

最新推荐文章于 2025-08-18 23:32:25 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/phpfensi/p/7298480.html

本文介绍了一种使用JavaScript实现网页上动态打字效果的方法。通过逐步显示字符并为每个字符设置不同的颜色来模拟打字机的效果。

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

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);
    };

}