简单打字机效果示例

南乔几经秋

于 2018-08-07 11:11:28 发布

阅读量549

点赞数 1

分类专栏： HTML 文章标签： js 打字机效果 html

本文链接：https://blog.csdn.net/weixin_39072332/article/details/81477739

版权

HTML 专栏收录该内容

9 篇文章

订阅专栏

前不久还看到网上一篇大佬的简历，用到了炫酷的打字机效果，但是自己想想，好像实现起来也挺简单，下面上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字机效果</title>
</head>

<body>
    <div id="div"></div>
    <script type="text/javascript">
        var str,timer,
            content = '世界很粗糙，岁月也不温柔，我们曾是淋透了雨的人，都没有伞，慌慌张张躲进了同一个屋檐。' +
                        '碰巧发现彼此有相同的目的地，于是有勇气并肩一起，散步淋雨。'+
                        '那一路多开心，因为舍不得再见，所以宁愿人间的风雨都别停，天别晴...',
            i = 0,
            length = content.length + 1,
            div = document.getElementById('div');
        function write(){
            if(i < length){
                str = content.substring(0, i);
                div.innerHTML = str;
                i++;
                timer = setTimeout(function(){
                    write();
                },300);
            }
        }
        write();
    </script>

</body>
</html>