这个是我网上下载的一个js实现打字效果的完整代码,我想把它弄成一个组件,类似这样的unction dazi(参数1,参数2,参数3){}这样的方便调用,我自己弄了半天没成功,希望大家帮帮我,代码如下:
JS字幕打字效果
<br> body{<br> font-family: Arial;<br> margin-top:0px;<br> background-repeat:no-repeat;<br> padding-top:100px;<br> }<br> #myContent, #myContent blink{<br> width:500px;<br> height:200px;<br> background:black;<br> color: #00FF00;<br> font-family:courier;<br> }<br><br> blink{<br> display:inline;<br> }<br>
<br> var charIndex = -1;<br> var stringLength = 0;<br> var inputText;<br> function writeContent(init){<br> if(init){<br> inputText = document.getElementById('contentToWrite').innerHTML;<br> }<br> if(charIndex==-1){<br> charIndex = 0;<br> stringLength = inputText.length;<br> }<br> var initString = document.getElementById('myContent').innerHTML;<br> initString = initString.replace(/<SPAN.*$/gi,"");</p> <pre><code> var theChar = inputText.charAt(charIndex); var nextFourChars = inputText.substr(charIndex,4); if(nextFourChars=='<BR>' || nextFourChars=='<br>'){ theChar = '<BR>'; charIndex+=3; } initString = initString + theChar + "<SPAN id='blink'>_</SPAN>"; document.getElementById('myContent').innerHTML = initString; charIndex = charIndex/1 +1; </code></pre> <p>if(charIndex%2==1){<br> document.getElementById('blink').style.display='none';<br> }else{<br> document.getElementById('blink').style.display='inline';<br> }</p> <pre><code> 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> </code></pre> <p></head><br> <body></p> <div id="myContent"> </div> <div id="contentToWrite" style="display:none"> Login : username<br> password : ******<br> Access is granted<br> </div> <script type="text/javascript"> writeContent(true);