利用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/
效果：
更多内容访问omegaxyz.com
网站所有代码采用Apache 2.0授权
网站文章采用知识共享许可协议BY-NC-SA4.0授权
© 2018 • OmegaXYZ-版权所有 转载请注明出处
