使用 jquery.terminal 在指定 div 中创建交互式终端-html教程-PHP中文网

使用 jquery.terminal 在指定 div 中创建交互式终端

聖光之護

发布： 2025-10-22 10:43:03

原创

789人浏览过

使用 jquery.terminal 在指定 div 中创建交互式终端

本教程详细介绍了如何在网页中，不占用整个 `body` 标签，而是在一个特定的 `div` 元素内创建并初始化 `jquery.terminal` 实例。内容涵盖了所需的外部资源引入、html 结构、基础 css 样式以及 javascript 初始化代码，并提供了一个完整的可运行示例，帮助开发者快速在自定义区域构建交互式命令行界面。

在现代前端开发中，有时我们需要在网页的特定区域嵌入一个交互式终端，而不是让它占据整个页面。jquery.terminal 是一个功能强大的 jQuery 插件，能够帮助我们轻松实现这一需求。本教程将指导您如何在自定义的 div 元素中成功部署和初始化 jquery.terminal。

1. 引入必要资源

要使用 jquery.terminal，您需要引入 jQuery 库、jquery.terminal 的 JavaScript 文件以及其配套的 CSS 样式表。这些资源通常通过 CDN 引入，以简化开发流程。请确保在您的 HTML 文件 <head> 或 <body> 标签的末尾引入它们：

<!-- jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jquery.terminal JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/js/jquery.terminal.min.js" integrity="sha512-lfkU/Qku0yOVZEYANlw2mOv7fpHFdS1E62UT7vJ55k22OB+xgRNNa6Cdor4Lugl4jhDjX29lJAG12X/OHFe8JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- jquery.terminal CSS 样式表 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/css/jquery.terminal.css" integrity="sha512-lT1/Sb6Bu4LaJJoTsxNZnlvt7pjuntBoSqSMJY7MxG5Yl1XgxsXA6jcJinPU0lx5eEsnudBE1ubzHSYR/W8xTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

登录后复制

2. 定义终端容器的 HTML 结构

在您希望显示终端的页面位置，创建一个 div 元素，并为其指定一个唯一的 id。例如，我们使用 id="myterm"：

<div id="myterm"></div>

登录后复制

3. 为终端容器添加基础 CSS 样式

为了让终端容器在页面上可见并拥有合适的尺寸，您需要为其添加一些基本的 CSS 样式。至少应设置 height，以便终端有足够的空间显示内容。您还可以添加 border 等样式来明确其边界。

#myterm {
  height: 300px; /* 设置高度 */
  border: 1px solid red; /* 添加边框，方便调试和观察 */
  width: 100%; /* 可选：设置宽度 */
  background-color: #000; /* 可选：设置背景色 */
  color: #fff; /* 可选：设置文字颜色 */
}

登录后复制

将这段 CSS 代码放置在 <style> 标签内，或者您的外部 CSS 文件中。

4. 初始化 jquery.terminal 实例

现在，您可以通过 JavaScript 来初始化 jquery.terminal。关键在于使用 jQuery 选择器精确地选中您定义的 div 元素（例如 $('#myterm')），然后调用 .terminal() 方法。

在 .terminal() 方法中，第一个参数是一个包含命令定义的对象，第二个参数是配置选项。

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

<script>
  $(document).ready(function() { // 确保DOM加载完成后执行
    $('#myterm').terminal({
      // 定义一个名为 'hello' 的命令
      hello: function (name) {
        this.echo('Hello, ' + name + '. Welcome to MyTerm');
      },
      // 您可以定义更多命令，例如 'echo'
      echo: function(arg) {
        this.echo(arg);
      }
    },
    {
      // 终端的欢迎语
      greetings: '欢迎来到 MyTerm! 输入 "help" 查看可用命令。',
      // 终端提示符
      name: 'myterm_demo',
      prompt: 'myterm> '
    });
  });
</script>

登录后复制

代码解释：

$(document).ready(function() { ... });：这是一个良好的实践，确保在 DOM 完全加载和解析之后再执行 JavaScript 代码，以避免找不到目标元素的问题。
$('#myterm').terminal(...)：通过 ID 选择器选中 <div id="myterm"> 元素，并在此元素上初始化终端。
hello: function (name) { ... }：定义了一个名为 hello 的自定义命令。当用户在终端输入 hello <name> 时，此函数会被调用，name 作为参数传入。this.echo() 用于在终端输出文本。
greetings: '...'：设置终端启动时显示的欢迎消息。
name: 'myterm_demo'：为终端实例指定一个名称。
prompt: 'myterm> '：设置终端的命令提示符。

5. 完整示例

将上述所有部分组合起来，一个完整的 index.html 文件可能如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 Div 中的 jQuery Terminal</title>
  <!-- jquery.terminal CSS 样式表 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/css/jquery.terminal.css" integrity="sha512-lT1/Sb6Bu4LaJJoTsxNZnlvt7pjuntBoSqSMJY7MxG5Yl1XgxsXA6jcJinPU0lx5eEsnudBE1ubzHSYR/W8xTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body {
      font-family: monospace;
      margin: 20px;
      background-color: #f0f0f0;
    }
    #myterm {
      height: 300px; /* 终端高度 */
      width: 80%; /* 终端宽度 */
      max-width: 800px; /* 最大宽度 */
      margin: 0 auto; /* 居中显示 */
      border: 1px solid #333; /* 边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 阴影效果 */
      background-color: #000; /* 终端背景色 */
      color: #0f0; /* 默认文字颜色 (绿色) */
      padding: 10px;
      box-sizing: border-box; /* 包含内边距和边框在宽度内 */
    }
  </style>
</head>
<body>

  <h1>在指定 Div 中创建 jQuery Terminal</h1>
  <p>这是一个演示如何在自定义 div 元素中初始化 jquery.terminal 的示例。</p>

  <div id="myterm"></div>

  <!-- jQuery 库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- jquery.terminal JavaScript 文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/js/jquery.terminal.min.js" integrity="sha512-lfkU/Qku0yOVZEYANlw2mOv7fpHFdS1E62UT7vJ55k22OB+xgRNNa6Cdor4Lugl4jhDjX29lJAG12X/OHFe8JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    $(document).ready(function() {
      $('#myterm').terminal({
        hello: function (name) {
          this.echo('Hello, ' + name + '. Welcome to MyTerm');
        },
        // 示例：一个简单的加法命令
        add: function(a, b) {
          a = parseInt(a);
          b = parseInt(b);
          if (isNaN(a) || isNaN(b)) {
            this.echo('Usage: add <number1> <number2>');
          } else {
            this.echo('Result: ' + (a + b));
          }
        }
      },
      {
        greetings: '欢迎来到 MyTerm! 输入 "help" 查看可用命令。',
        name: 'myterm_demo',
        prompt: 'myterm> '
      });
    });
  </script>

</body>
</html>

登录后复制

6. 运行与测试

保存上述 HTML 文件并在浏览器中打开。您应该会看到一个黑色的终端区域，显示欢迎语和提示符 myterm>。

尝试输入以下命令：

help：查看所有可用命令。
hello World：终端将响应 Hello, World. Welcome to MyTerm。
add 5 3：终端将响应 Result: 8。

注意事项与总结

资源加载顺序：确保 jQuery 库在 jquery.terminal JavaScript 文件之前加载，因为 jquery.terminal 依赖于 jQuery。
DOM Ready：始终将 jquery.terminal 的初始化代码放在 $(document).ready() 回调函数中，以确保目标 div 元素在脚本执行时已经存在于 DOM 中。
CSS 样式：为您的终端容器 div 提供明确的 height 是至关重要的，否则终端可能无法正确显示。您可以根据需要调整 width、background-color、color 等样式来匹配您的网页设计。
命令定义：jquery.terminal 允许您定义任意数量的自定义命令，通过函数实现其逻辑。this.echo() 是在终端中输出文本的主要方法。
配置选项：除了 greetings 和 prompt，jquery.terminal 还提供了丰富的配置选项，例如 history (是否启用命令历史)、login (用户认证) 等，您可以查阅其官方文档进行更高级的定制。