3

我正在尝试创建一个具有多个命令的 Linux 终端主题网站。用户可以像普通终端一样自由使用他/她想要的任何命令。我创建了一个示例 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>

输出网站如下所示:

The_pic_of_website

现在,如果我再添加一个功能。我得到错误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)。

4

1 回答 1

4

您需要用逗号分隔功能。

<!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函数/参数并继续:)

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

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

于 2020-11-03T04:58:53.350 回答