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

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

}
复制代码

 

posted @ 2017-08-07 12:11  壁虎漫步.  阅读(994)  评论(0)    收藏  举报
编辑推荐:
· 本可避免的P1事故:Nginx变更导致网关请求均响应400
· 还在手写JSON调教大模型?.NET 9有新玩法
· 复杂业务系统线上问题排查过程
· 通过抓包,深入揭秘MCP协议底层通信
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
阅读排行:
· 推荐 6 款基于 .NET 开源的串口调试工具,调试效率提升利器!
· 《HelloGitHub》第 112 期
· 千万级的大表如何新增字段?
· AI 的力量,开发者的翅膀:欢迎使用字节旗下的 AI 原生开发工具 TRAE
· 大模型的JSON之殇:从脆弱的API调用到稳健的未来
点击右上角即可分享
微信分享提示