JavaScript模拟终端输出

利用JavaScript+CSS能够模拟出终端输入画面（类似于Linux终端画面）当然更好的代码也可以模拟出黑客帝国那样的输出画面。

CSS设置：

这里写图片描述

height:auto表示随着输出字数的增加，界面随之向下移动，如果设置为200px则是固定大小为200像素，不能动态增加高度。

background:black表示背景是黑色，当然你也可以试试其他的颜色。

字体颜色：#00FF02绿色。

JavaScript包含两个函数，一个是writeContent，这个是内容输出函数，另一个是blinkSpan这个模拟行标闪烁。

利用setTimeout函数来控制输出速度。

HTML/JavaScript代码

<head>

<style type="text/css">

    #myContent, #myContent blink{
        width:100%;
        height:auto;
        background:black;
        color: #00FF02;
        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 = "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>
</head>

<div id="myContent">
</div>

<script type="text/javascript">
writeContent(true);
</script>

复制上述代码进入以下链接进行测试：

http://www.omegaxyz.com/onlinetools/web-running/
效果：
这里写图片描述

JavaScript模拟终端输出

猜你喜欢