打字效果 html,一个逼真的JS打字效果

确实很逼真的JS打字效果，配合黑色的背景，整个效果就像一个DOS命令窗口一样，得益于JS与CSS技术的结合。这里要注意writeContent(true);的用法。

JS字幕打字效果

body{

font-family: Arial;

margin-top:0px;

background-repeat:no-repeat;

padding-top:100px;

}

#myContent, #myContent blink{

width:500px;

height:200px;

background:black;

color: #00FF00;

font-family:courier;

}

blink{

display:inline;

}

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;

initString = initString.replace(/

var theChar = inputText.charAt(charIndex);

var nextFourChars = inputText.substr(charIndex,4);

if(nextFourChars=='
' || nextFourChars=='
'){

theChar  = '
';

charIndex+=3;

}

initString = initString + theChar + "_";

document.getElementById('myContent').innerHTML = initString;

charIndex = 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);

}

Login : username

password : ******

Access is granted

writeContent(true);