js实现打字效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现打字效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
  
<html>  
    <head>  
        <meta charset=‘utf-8‘>  
        <title>js typing</title>  
    </head>  
  
    <body>  
        <div id=‘text‘></div>  
  
        <script>  
            var str = ‘javascript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果JavaScript实现打字效果‘;  
            var i = 0;  
  
            function typing(){  
                var divTyping = document.getElementById(‘text‘);  
                if (i <= str.length) {  
                    divTyping.innerHTML = str.slice(0, i++) + ‘_‘;  
                    setTimeout(‘typing()‘, 200);//递归调用  
                }  
                else{  
                    divTyping.innerHTML = str;//结束打字,移除 _ 光标  
                }  
            }  
  
            typing();  
        </script>  
    </body>  
</html>


本文出自 “JavaScript” 博客，请务必保留此出处http://12628867.blog.51cto.com/12618867/1916966

以上是关于js实现打字效果的主要内容，如果未能解决你的问题，请参考以下文章

使用js实现简单的打字效果

js实现打字效果

从打字机效果的 N 种实现看JS定时器机制和前端动画

实战用CSS实现文本打字机效果

JS+CSS实现CodePen首页多行打字机动画，最通俗易懂版本

想实现前端酷炫的打字机效果吗