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