JavaScript 打字机效果
实例1
<html> <title>JavaScript 打字机</title> <head> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin-top:0px; background-image:url('../../images/heading3.gif'); background-repeat:no-repeat; padding-top:100px; } #myContent, #myContent blink{ width:500px; height:200px; background:black; color: #00FF00; font-family:courier; } blink{ display:inline; } </style> <script type="text/javascript"> var charIndex = -1; var stringLength = 0; var inputText; function writeContent(init){ if(init){ inputText = document.getElementById('contentToWrite').innerHTML; } if(charIndex==-1){ charIndex = 0; stringLength = inputText.length; } var initString = document.getElementById('myContent').innerHTML; initStringinitString = initString.replace(/<SPAN.*$/gi,""); var theChar = inputText.charAt(charIndex); var nextFourChars = inputText.substr(charIndex,4); if(nextFourChars=='<BR>' || nextFourChars=='<br>'){ theChar = '<BR>'; charIndex+=3; } initStringinitString = initString + theChar + "<SPAN id='blink'>_</SPAN>"; document.getElementById('myContent').innerHTML = initString; charIndexcharIndex = charIndex/1 +1; if(charIndex%2==1){ document.getElementById('blink').style.display='none'; }else{ document.getElementById('blink').style.display='inline'; } if(charIndex<=stringLength){ setTimeout('writeContent(false)',150); }else{ blinkSpan(); } } var currentStyle = 'inline'; function blinkSpan(){ if(currentStyle=='inline'){ currentStyle='none'; }else{ currentStyle='inline'; } document.getElementById('blink').style.display = currentStyle; setTimeout('blinkSpan()',500); } </script> <body> <div id="myContent"> </div> <div id="contentToWrite" style="display:none"> <!-- Put the typewriter content here--> sharejs.com Login : username<br> password : ******<br> Access is granted<br> <!-- End typewriter content --> </div> <script type="text/javascript"> writeContent(true); </script> </body> </html>
实例2 (兼容IE,FX)
<html> <head> <title>打字效果的带链接的新闻标题</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body{font-size:14px;font-weight:bold;} </style> </head> <body> 最新内容:<a id="HotNews" href="" target="_blank"></a> <script language="JavaScript"> var NewsTime = 2000; //每条新闻的停留时间 var TextTime = 50; //新闻标题文字出现等待时间,越小越快 var newsi = 0; var txti = 0; var txttimer; var newstimer; var newnewstitle = new Array(); //新闻标题 var newnewshref = new Array(); //新闻链接 newstitle[0] = "javascript常用函数"; newshref[0] = "http://www.jb51.net/article/74365.htm"; newstitle[1] = "http://www.jb51.net/"; newshref[1] = "http://www.jb51.net/"; function shownew() { var endstr = "_"; hwnewstr = newstitle[newsi]; newslink = newshref[newsi]; if(txti==(hwnewstr.length-1)){endstr="";} if(txti>=hwnewstr.length){ clearInterval(txttimer); clearInterval(newstimer); newsi++; if(newsi>=newstitle.length){ newsi = 0 } newstimer = setInterval("shownew()",NewsTime); txti = 0; return; } clearInterval(txttimer); document.getElementById("HotNews").href=newslink; document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr; txti++; txttimer = setInterval("shownew()",TextTime); } shownew(); </script> </body> </html>
以上就是javascript如何实现打字机效果实例代码详解的详细内容,更多请关注php中文网其它相关文章!
已抢66410个
抢已抢36957个
抢已抢20500个
抢已抢2515个
抢已抢18961个
抢