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


本文介绍的是利用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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM