模拟打字机，文字逐个出现

王家五哥

已于 2023-04-20 18:38:17 修改

阅读量1.5w

点赞数 1

分类专栏： html案例文章标签： javascript 前端 jquery

于 2020-05-20 21:27:45 首次发布

本文链接：https://blog.csdn.net/qq_36521848/article/details/106244710

版权

html案例专栏收录该内容

44 篇文章 0 订阅

订阅专栏

效果图：

上代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <hr />
            <pre id="showMsg"></pre>
        <hr />
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script language="javascript">
            var index = 0;
            var time;
            var outPut = "	世界你好，现在开始测试文字逐个出现";

            function addstr() {
                $("#showMsg").text(outPut.substring(0, index++));
                var len = outPut.length;

                console.log(len);
                if(len < index) {
                    clearInterval(time);
                    $("#showMsg").fadeOut(5000);
                }
            }
            time = setInterval(addstr, 200);
        </script>

    </body>

</html>

关注博主即可阅读全文