【XGlassTerminal.js】快速构建炫酷终端网页以及 Linux 模拟器在线！！

XGlassTerminal.js

XGlassTerminal.js 是一个用于构建前端终端样式的 JavaScript 库。它允许开发者轻松地创建一个具有终端风格的用户界面，并对用户输入的命令进行事件处理。

该库提供了丰富的功能，包括文本添加、命令处理、点击事件绑定等。

同时还支持在终端中装载 Linux 终端模拟操作，如输入、Tab键、上下方向键等，其中内置了常用的 Linux 命令以及一些常用的 Linux 命令。

在这里插入图片描述

 __   _______ _            _______                  _             _   _     \ \ / / ____| |          |__   __|                (_)           | | (_)    \ V / |  __| | __ _ ___ ___| | ___ _ __ _ __ ___  _ _ __   __ _| |  _ ___ > <| | |_ | |/ _` / __/ __| |/ _ \ '__| '_ ` _ \| | '_ \ / _` | | | / __|/ . \ |__| | | (_| \__ \__ \ |  __/ |  | | | | | | | | | | (_| | |_| \__ \/_/ \_\_____|_|\__,_|___/___/_|\___|_|  |_| |_| |_|_|_| |_|\__,_|_(_) |___/_/ |    |__/

主要功能

终端样式构建

创建一个具有终端风格的 div 容器。
支持自定义命令前缀（如 #、$ 等）。

文本添加

可以向终端添加文本，并支持自动换行。
可以根据命令前缀处理特定的命令。

事件处理

支持对用户输入的命令进行处理。
可以绑定点击事件，使用户可以通过点击终端来聚焦输入框。

样式定制

提供基本的 CSS 样式，可以根据需要进行自定义。

基本使用方法

在线体验

您可以在线体验 XGlassTerminal.js 的功能，点击这里
可以快速前往一个已经可以使用的终端界面，这样的方法更加适合于体验。

基本终端样式使用案例

在你的 HTML 文件中引入 XGlassTerminal.js 和相应的 CSS 文件。然后使用下面的代码：


<html lang="zh"><head><meta charset="utf-8"><title>测试代码</title><link rel="stylesheet" href="css/XGlassTerminal.css">
</head><body>
<div></div>
</body><script src="js/XGlassTerminal.js" type="text/javascript"></script>
<script>// 实例化终端const terminal = new XGlassTerminal(document.querySelector("div"), "#");// 初始化终端 这里可以给处理函数terminal.initEvent(function (x, text) {alert("输入了: " + text);});// 添加文本 也可以使用 appendXGlassTextXGlassTerminal.appendXGlassText(terminal, "Hello World!", (x, e) => alert("输入了 " + e));
</script>
</html>

自定义命令前缀

  // 实例化终端  并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀
terminal.commandPrefix = "root@xxx# ";

按键多监听

// 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀 TODO 请确保这个函数在 initEvent 之前调用
terminal.commandPrefix = "root@xxx# ";
// 初始化终端 并对输入进行监听 TODO 参数统一是 当前的终端对象(为了防止在嵌套函数中无法访问设计的) 以及输入的命令
terminal.initEvent(// 第一个函数是监听回车后的命令(x, r) => XGlassTerminal.appendXGlassText(x, "您输入的是：" + r),// 第二个函数是监听Tab键后的命令(x, r) => x.input.value += ' 您按下了Tab键: 输入框的值为：' + r
);

linux 终端模拟操作

    // 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀
terminal.commandPrefix = "root@xxx# ";
// 初始化终端 并对输入进行监听 TODO 参数统一是 当前的终端对象(为了防止在嵌套函数中无法访问设计的) 以及输入的命令
terminal.initEvent(// 第一个函数是监听回车后的命令(x, r) => XGlassLinuxCommand.GetLinuxCommandHandler(x, r),// 第二个函数是监听Tab键后的命令(x, r) => XGlassLinuxCommand.GetLinuxCommandHandlerTab(x, r),// 第三个是上方向按键XGlassLinuxCommand.GetLinuxCommandHandlerArrowUp
);