body { font-family: Arial, sans-serif; margin: 20px; background-color: #222; color: #eee; } #myterm { height: 300px; /* 终端的高度 */ width: 80%; /* 终端的宽度 */ margin: 0 auto; /* 居中显示 */ border: 1px solid #0f0; /* 绿色边框 */ box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* 绿色阴影 */ background-color: #000; /* 终端背景色 */ padding: 10px; box-sizing: border-box; /* 确保padding不增加总宽度/高度 */ }

在指定DIV中创建jQuery Terminal

以下是一个集成在ID为 “myterm” 的DIV中的终端实例。

$(document).ready(function() { $(‘#myterm’).terminal({ hello: function (name) { this.echo(‘Hello, ‘ + name + ‘. Welcome to MyTerm’); }, // 您可以添加更多自定义命令 help: function() { this.echo(‘可用命令:’); this.echo(‘ hello [name] – 问候用户’); this.echo(‘ help – 显示此帮助信息’); } }, { greetings: ‘欢迎来到 MyTerm! 输入 “help” 查看可用命令。’, prompt: ‘myterm> ‘ // 自定义提示符 }); });