利用JavaScript+CSS能够模拟出终端输入画面（类似于Linux终端画面）当然更好的代码也可以模拟出黑客帝国那样的输出画面。
CSS设置：
height:auto表示随着输出字数的增加，界面随之向下移动，如果设置为200px则是固定大小为200像素，不能动态增加高度。
background:black表示背景是黑色，当然你也可以试试其他的颜色。
字体颜色：#00FF02绿色。
JavaScript包含两个函数，一个是writeContent，这个是内容输出函数，另一个是blinkSpan这个模拟行标闪烁。
利用setTimeout函数来控制输出速度。
HTML/JavaScript代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<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> |
复制上述代码进入以下链接进行测试：
效果如最上方的图所示
