利用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>
|
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> |
复制上述代码进入以下链接进行测试：
效果如最上方的图所示