js实现逐字打印效果，文本逐字显示

时间：2024-02-23 13:18:48

本文介绍的是利用js实现文本逐步显示的效果，简单的说，就是文字一个字一个字的显示出来，就像打印一样。

(引用别人的博客，原文章地址：http://www.gold404.cn/article/1545450130.html)

<!DOCTYPE html>
<html>
<head>
    <title>js实现逐字打印效果，文本逐字显示</title>
    <style type="text/css">
    body{background-color: #ffffee;}
    #text{height:280px;color:#df6fe1; font-size:16px;}
    </style>
</head>
<body>
    <p id="text"></p>    
<script>        
    var i=0;
    var str="亲爱的，遇见你是我今生最大的幸运，2018年7月7日8点16分我们在学校的操场偶遇。看到你的第一眼，我就确定了你就是我一直等待的那个人。我们从相遇到相识再到相知，我希望再到白头。余生，我想牵起你的手再也不松手！余生，我想牵起你的手再也不松手！余生，我想牵起你的手再也不松手！余生，我想牵起你的手再也不松手！";            
    window.onload=function typing(){
                //获取div
        var mydiv=document.getElementById("text");
        mydiv.innerHTML+=str.charAt(i);
        i++;
        var id=setTimeout(typing,80);
        if(i==str.length){
            clearTimeout(id);
            }
        }
</script>
</body>
</html>

 

相关文章