JavaScript模拟终端输入

本文共402个字,预计阅读时间需要2分钟。

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

CSS设置:

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

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

字体颜色:#00FF02绿色。

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

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

HTML/JavaScript代码

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

HTML/JS代码运行器

效果如最上方的图所示

 

读者评分
[评分人数: 3 平均分: 5]

评论