js实现逐字打印效果,文本逐字显示
K先生
爱技术3655
本文介绍的是利用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先生:今天不谈技术,来聊聊心情
下一篇: 北漂之旅~新的征程
文章评论
评论列表