模仿終端打字效果

  • 模仿終端打字效果
<script type="text/javascript"> 
var charIndex = -1;
var stringLength = 0;
var inputText;
function writeContent(init){
    if(init){
        inputText = "Waiting...<br> Connecting To OmegaXYZ.com...<br>Connection Established.<br>Copyright (c) 2018 OmegaXYZ.com All Rights Reserved.<br>[root@host~] Login : xyjigsaw<br>[root@host~] password : ******<br>[root@host~] Access Is Granted!<br>//歡迎訪問OmegaXYZ.com<br>[root@host~] Attention:請查找時簡化關鍵字~";
    }
    if(charIndex==-1){
        charIndex = 0;
        stringLength = inputText.length;
    }
    var initString = document.getElementById('myContent').innerHTML;
    initString = initString.replace(/<SPAN.*$/gi,"");

    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;
    if(charIndex%2==1){
         document.getElementById('blink').style.display='none';
    }else{
         document.getElementById('blink').style.display='inline';
    }

    if(charIndex<=stringLength){
        setTimeout('writeContent(false)',50);
        }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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章