JS实现简单的键盘打字的效果

本文给大家分享的是使用javascript实现的简单的键盘打字效果，十分的简单实用，推荐给有需要的小伙伴参考下。

以代码形式实现过程分析：

1. <html> 
2. <head> 
3. <title>打字效果</title> 
4. <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> 
5. <style type="text/css"> 
6. body{ 
7. font-size:14px; 
8. font-color:#purple; 
9. font-weight:bolder; 
10. } 
11. </style> 
12. </head> 
13. <body> 
14. 最新内容: <a id = "Hotnews" href="" target="_blank"> </a>  
15. <script language="javascript"> 
16. var NewsTime = 2000; //每条信息完整出现后停留时间 
17. var TextTime = 100; //每条信息中的字出现的间隔时间 
18.  
19. var newsi = 0; 
20. var txti = 0; 
21. var txttimer; //调用setInterval的返回值，用于取消对函数的周期性执行 
22. var newstimer; 
23.  
24. var newstitle = new Array(); //以数组形式保存每个信息的标题 
25. var newshref = new Array(); //以数组形式保存信息标题的链接 
26.  
27. newstitle[0] = "欢迎来到我的博客"; //显示在网页上的文字内容和对应的链接 
28. newshref[0] = "http://www.vevb.com/guihailiuli/"; 
29.  
30. newstitle[1] = "http://www.vevb.com/guihailiuli/"; 
31. newshref[1] = "http://www.vevb.com/guihailiuli/"; 
32.  
33. newstitle[2] = "博客园欢迎你哦"; 
34. newshref[2] = "http://www.vevb.com"; 
35.  
36. newstitle[3] = "ByeBye~~"; 
37. newshref[3] = "http://www.vevb.com"; 
38.  
39. function shownew(){ 
40. hwnewstr=newstitle[newsi]; //通过newsi传递，依次显示数组中的内容 
41. newslink=newshref[newsi]; //依次显示文字对应的链接 
42.  
43. if(txti>=hwnewstr.length){ 
44. clearInterval(txttimer); //一旦超过要显示的文字长度，清除对shownew()的周期性调用 
45. clearInterval(newstimer);  
46. newsi++; //显示数组中的下一个 
47.  
48. if(newsi>=newstitle.length){ 
49. newsi = 0; //当newsi大于信息标题的数量时，把newsi清零，重新从第一个显示 
50. } 
51. newstimer = setInterval("shownew()",NewsTime); //间隔2000ms后重新调用shownew() 
52. txti = 0;  
53. return; 
54. } 
55. clearInterval(txttimer);  
56. document.getElementById("Hotnews").href = newslink;  
57. document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1); //截取字符，从第一个字符到txti+1个字符 
58.  
59. txti++; //文字一个个出现 
60. txttimer = setInterval("shownew()",TextTime);  
61. } 
62. shownew(); 
63.  
64. </script> 
65. </body> 
66. </html> 

以上所述就是本文的全部内容了，希望能够给大家学习javascript有些帮助