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