js实现逐字打印效果，文本逐字显示
K先生
爱技术3134
本文介绍的是利用js实现文本逐步显示的效果，简单的说，就是文字一个字一个字的显示出来，就像打印一样。代码比较简单，就不多说了，直接贴代码了。
<!DOCTYPE html>
<html>
<head>
<title>js实现逐字打印效果，文本逐字显示</title>
<style type="text/css">
body{background-color: #ffffee;}
#text{height:280px;color:#df6fe1; font-size:24px;}
</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>
效果图：
如果有小伙伴对代码有疑问，欢迎留言交流。
作者：K先生本文地址：http://www.gold404.cn/info/25
版权声明：本文为原创文章，版权归 K先生个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
上一篇： K先生：今天不谈技术，来聊聊心情
下一篇： 北漂之旅～新的征程
文章评论
评论列表