K先生个人博客

当前位置:首页 > 爱技术 > 正文

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

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

效果图:

js逐字打印

如果有小伙伴对代码有疑问,欢迎留言交流。

作者K先生本文地址http://www.gold404.cn/

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论
* 必填项
可选
可选
评论列表

    暂时还没有评论哦!