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模拟终端输出相关推荐

java过滤map去除重复数据,javascript模拟map输出与去除重复项的方法
本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private va ...
web模拟终端博客系统
2019独角兽企业重金招聘Python工程师标准>>> 本文由QQ音乐前端团队发表前段时间做了一个非常有意思的模拟终端的展示页:http://ursb.me/terminal/(没 ...
【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象
文章目录一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...
肝了2天，把终端输出的彩色日志都搬到了浏览器上。
前言前段时间在使用 Travis CI 的时候发现它的部署日志包含了很多带色彩的日志. 并且我们知道,在使用命令行终端的时候也会出现这些可爱的色彩. 当然我不是为了吹它而吹它,它是有实际的作用的,能 ...
chord协议模拟实现_C#.NET和单片机串口通信实现监控单片机数字量输入继电器输出模拟量输入模拟量输出...
一.必备软件和硬件: 1.C#.NET: 2.单片机开发板: 3.通信电缆. 二.通信参数: 1.数据位:8位 2.校验方式:无校验 3.停止位:1位 4.波特率:9600bps 5.通信协议:自定义 ...
python类库丰富吗_Rich库：丰富你的Python程序终端输出
Python是一门非常流行的语言,很多人也用它来写一些工具程序,辅助日常工作.说到写程序,大家自然想到的是各种功能强大的图形界面程序,但是写过GUI程序的朋友都知道,GUI程序虽然看起来好看,但是写起 ...
花里胡哨，如何在Linux终端输出带有颜色的字体，将带颜色的字体赋值给变量...
背景在日常操作Linux的情况下,总会遇到一些需求,比如说,把输出的内容用不同颜色标注出来,以达到醒目.提示的目的,那么如何在Linux终端输出带有颜色的字体呢? Linux终端输出字符颜色 ...
设定printf在终端输出的颜色
转载: https://www.cnblogs.com/yirenyang/p/4653661.html https://blog.csdn.net/yangguihao/article/detail ...
通过printf设置Linux终端输出的颜色和显示方式
前言在Linux终端下调试程序时,有时需要输出大量信息.若能控制字体的颜色和显示方式,可使输出信息对比鲜明,便于调试时观察数据. 终端的字符颜色由转义序列(Escape Sequence)控制,是文 ...
Javascript模拟c#中arraylist操作（学习分享）
最近在看javascript,在<javascript高级编程>中也学到了不少东西.但是在这里要感谢博客园的"汤姆大叔" 的无私奉献,他的关于javascript相关博 ...

JavaScript模拟终端输出

JavaScript模拟终端输出相关推荐

最新文章

热门文章