你的位置:首页 > Java教程

[Java教程]js如何将字符串中的字符逐字输出


js如何将字符串中的字符逐字输出:
有些网页效果,可以将字符串中的字符逐字输出,类似于打字机的方式,下面就通过实例代码介绍一下如何实现此功能。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title> <style type="text/css">#thediv{ width:200px; height:30px; line-height:30px; margin:0px auto;}</style><script type="text/javascript"> var printStr=function(id,str){ var i=0; var content=""; var arr=null; var flag=null; var done=function() {  arr=str.split("");  content=content+arr[i];  var odiv=document.getElementById(id);  odiv.innerHTML=content;  i=i+1;  if(i==arr.length){clearInterval(flag)} } flag=setInterval(done,200);}window.onload=function(){ var str="I love antzone"; printStr("thediv",str);}</script> </head> <body> <div id="thediv"></div></body> </html>

 

以上代码实现了我们的要求,能够将字符串中的字符逐个输出,代码比较简单,这里就不多介绍了,如有任何问题可以跟帖留言。
一.实现原理:
原理非常的简单,首先将字符串转换为数组,每一个字符是一个数组中的元素,然后通过定时器函数,每隔指定的事件设置一个div中的内容,而这个内容,每隔指定的时间都会发生变化,这个变化就是比之前增加了一个数组中的字符,也就实现逐个输出的效果。
二.相关阅读:
1.split()函数可以参阅javascript的String对象的split()方法一章节。 
2.setInterval()函数可以参阅window对象的setInterval()方法一章节。
3.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。  

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10516

更多内容可以参阅:http://www.softwhy.com/javascript/