简单打字机效果

简单的原生js实现打字机效果。就几行代码，直接看下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">fd</div>
    <script type="text/javascript">
        var txt,timer,
            str = '凌晨四点的洛杉矶',
            pos = 0,
            maxLen = str.length + 1,
            div = document.getElementById('div1');
        function write(){
            if(pos < maxLen){
                txt = str.substring(0,pos);
                div.innerHTML = txt;
                pos++;
                timer = setTimeout(function(){
                    write();
                },200);
            }
        }
        write();
    </script>
    
</body>
</html>

 

posted @ 2017-03-31 17:09  _Jo  阅读(158)  评论(0)  编辑  收藏  举报