使用 HTML 和 JavaScript 创建一个 Linux 终端主题网站

Question

我正在尝试创建一个具有多个命令的 Linux 终端主题网站。用户可以像普通终端一样自由使用 he/she 想要的任何命令。我已经创建了一个示例 HTML 文件并包含了一个简单的函数，当用户显示猫时它会显示“猫”。但是，我在创建多个函数时遇到问题。我对 javascript 和 HTML 不太熟悉，所以这可能是一个愚蠢的问题。我的代码是：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    }
});
    </script>
</body>
</html>

输出网站看起来像这样：

现在，如果我再添加一项功能。我收到错误 function_name not found。我的多功能示例代码是，

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    }
    dog: function(v){
        this.echo('hello ' + v);
    }
});
    </script>
</body>
</html>

所以，我想要一个可以与多个命令（功能）交互的终端。此外，很高兴被引导至其他资源，这些资源可能包含有关此主题的有用信息。提前致谢。（另外，我提到了 https://itnext.io/how-to-create-interactive-terminal-like-website-888bb0972288）。

Answer 1

您需要用逗号分隔函数。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
    <script>
$('body').terminal({
    cat: function() {
        this.echo($('<img src="https://placekitten.com/408/287">'));
    },
    dog: function(v){
        this.echo('hello ' + v);
    }
});
    </script>
</body>
</html>

因为您已经在其中添加了一个 v 参数，所以您必须输入“dog 1”或“dog anything”才能正常工作，否则请删除 v function/param 并继续 :)

要回答有关资源和学习的部分，只需学习 JavaScript/jQuery 的基本原理，其余的就会有意义 - 虽然立即深入了解是一种学习方式，但有时您必须回到基础知识，有无数的视频和文章可以教你基础知识，它们都只是一个简单的 Google。

JavaScript/jQuery/HTML 都遵循一个基本的基础，一旦你学会了这些，你就可以从高级的东西中获得更多乐趣。您基本上是在建造房屋的墙壁之前尝试建造屋顶。

使用 HTML 和 JavaScript 创建一个 Linux 终端主题网站

Creating a Linux terminal themed website using HTML and JavaScript

html

javascript

css

jquery

jquery-terminal