JS实现简单的键盘打字的效果
以代码形式实现过程分析:
<html> <head> <title>打字效果</title> <metahttp-equiv="Content-Type"Content="text/html;charset=gb2312"/> <styletype="text/css"> body{ font-size:14px; font-color:#purple; font-weight:bolder; } </style> </head> <body> 最新内容:<aid="Hotnews"href=""target="_blank"></a> <scriptlanguage="javascript"> varNewsTime=2000;//每条信息完整出现后停留时间 varTextTime=100;//每条信息中的字出现的间隔时间 varnewsi=0; vartxti=0; vartxttimer;//调用setInterval的返回值,用于取消对函数的周期性执行 varnewstimer; varnewstitle=newArray();//以数组形式保存每个信息的标题 varnewshref=newArray();//以数组形式保存信息标题的链接 newstitle[0]="欢迎来到我的博客";//显示在网页上的文字内容和对应的链接 newshref[0]="https://www.nhooo.com/guihailiuli/"; newstitle[1]="https://www.nhooo.com/guihailiuli/"; newshref[1]="https://www.nhooo.com/guihailiuli/"; newstitle[2]="博客园欢迎你哦"; newshref[2]="https://www.nhooo.com"; newstitle[3]="ByeBye~~"; newshref[3]="https://www.nhooo.com"; functionshownew(){ hwnewstr=newstitle[newsi];//通过newsi传递,依次显示数组中的内容 newslink=newshref[newsi];//依次显示文字对应的链接 if(txti>=hwnewstr.length){ clearInterval(txttimer);//一旦超过要显示的文字长度,清除对shownew()的周期性调用 clearInterval(newstimer); newsi++;//显示数组中的下一个 if(newsi>=newstitle.length){ newsi=0;//当newsi大于信息标题的数量时,把newsi清零,重新从第一个显示 } newstimer=setInterval("shownew()",NewsTime);//间隔2000ms后重新调用shownew() txti=0; return; } clearInterval(txttimer); document.getElementById("Hotnews").href=newslink; document.getElementById("Hotnews").innerHTML=hwnewstr.substring(0,txti+1);//截取字符,从第一个字符到txti+1个字符 txti++;//文字一个个出现 txttimer=setInterval("shownew()",TextTime); } shownew(); </script> </body> </html>
以上所述就是本文的全部内容了,希望能够给大家学习javascript有些帮助。