自动打字

作者: 匆匆那年_海 | 来源:发表于2020-03-18 10:08 被阅读0次

简单的代码自动打字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自动打字</title>
    </head>
    <body>
        <div id="box"></div>
        <script type="text/javascript">
            var str =
                '哎呦喂，这么无聊啊！<br>来大哥给你讲个故事吧<br>从前有个人非常的无聊<br>无聊到看我神速敲代码打字呢<br>还看了那么久<br>还在看<br>还没看够啊<br><br><br>我都敲累了~<br>哈哈哈你继续看~<br>我休息哈';
            var i = 0;
            function auto() {
                var box = document.getElementById('box');
                // slice中i的范围为0-str.length 因为包前不包后嘛
                if (i <= str.length) {
                    // 跳过回车
                    if (str.slice(i - 1, i) === '<') {
                        i += 2
                    }
                    box.innerHTML = str.slice(0, i++) + '|';
                    // 递归
                    setTimeout(auto, 80);
                } else {
                    box.innerHTML = str
                }
            }
            setTimeout(auto, 2000)
        </script>
    </body>
</html>