你的位置:首页 > Java教程

[Java教程]js实现文字逐个显示实例代码


js实现文字逐个显示实例代码:
很多网页中,都有这样的效果,文字可以像是打字机一样逐个输出,在某些应用场景中,效果还是不错的,下面就通过实例代码简单介绍一下,代码实例如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>邮箱输入提示效果代码-蚂蚁部落</title> <style type="text/css">#content{ width:400px; height:30px; line-height:30px;}</style><script type="text/javascript"> window.onload=function(){ var ocontent=document.getElementById("content"); var str="蚂蚁部落欢迎您,只有奋斗才会有美好的未来。"; var i=0; var flag=null; function done(){  if(i<str.length){   ocontent.innerHTML=str.substring(0,i+1);   i=i+1;  }   else{   clearInterval(flag);  }  } flag=setInterval(done,200);}</script> <body> <div id="content"></div></body> </html>

以上代码实现了预期的功能,字符串的字符能够挨个输出,下面简单介绍一下实现过程。
一.实现原理:
创建一个函数done(),此函数能够截取指定长度的字符串,并将当前截取的字符串写入div,并且此函数每执行一次截取的长度都要加1。使用定时器函数每隔指定的事件执行一次此此函数,这样逐字展现的效果。
二.实现原理:
1.getElementById()函数可以参阅javascript的document.getElementById()方法一章节。
2.substring()函数可以参阅javascript的String对象的substring()方法一章节。 
3.setInterval()函数可以参阅setInterval()函数用法详解一章节。 
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。

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

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