Câu trả lời ngắn: bạn có thể làm bất cứ thứ gì sử dụng JavaScript. Dưới đây là một giao diện điều khiển ví dụ có một lệnh theo sau là một tập các đối số được phân cách bằng dấu cách, tương tự như nhiều hành động dòng lệnh của cửa sổ.
Có vẻ như bạn rất mới với JavaScript và bạn nên tìm hiểu cách hoạt động với trình duyệt ở cốt lõi… nhưng tôi không biết bạn đang sử dụng trình duyệt nào, vì vậy ví dụ của tôi sử dụng khung công tác YUI để mã của tôi không bị lộn xộn với bình thường hóa trình duyệt.
Thử lưu phần sau dưới dạng tài liệu HTML. Sau đó, khi bạn mở nó trong trình duyệt của bạn, hãy thử "do_stuff arg1 George 9 howdy" hoặc "chào Navweb". Tôi hy vọng bạn có thể tìm ra những gì đang xảy ra bằng cách kiểm tra mã. Tôi e rằng tôi không có thời gian để đưa ra các nhận xét thích hợp.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Console</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css"/>
<style type="text/css">
html {
background-color: #000;
}
body {
font-family: "Lucida Console";
font-size: 13px;
color: #0f0;
}
#in {
display: block;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 8px;
border-color: #fff;
border-width: 1px 0 0 0;
background-color: #000;
color: #0f0;
}
</style>
</head>
<body>
<div id="out"></div>
<input id="in" tabindex="0"/>
</body>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.5.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use("node", function(Y) {
var COMMANDS = [
{
name: "do_stuff",
handler: doStuff
},
{
name: "greet",
handler: function(args) {
outputToConsole("Hello " + args[0] + ", welcome to Console.");
}
}
];
function processCommand() {
var inField = Y.one("#in");
var input = inField.get("value");
var parts = input.replace(/\s+/g, " ").split(" ");
var command = parts[0];
var args = parts.length > 1 ? parts.slice(1, parts.length) : [];
inField.set("value", "");
for (var i = 0; i < COMMANDS.length; i++) {
if (command === COMMANDS[i].name) {
COMMANDS[i].handler(args);
return;
}
}
outputToConsole("Unsupported Command: " + command);
}
function doStuff(args) {
outputToConsole("I'll just echo the args: " + args);
}
function outputToConsole(text) {
var p = Y.Node.create("<p>" + text + "</p>");
Y.one("#out").append(p);
p.scrollIntoView();
}
Y.on("domready", function(e) {
Y.one("body").setStyle("paddingBottom", Y.one("#in").get("offsetHeight"));
Y.one("#in").on("keydown", function(e) {
if (e.charCode === 13) {
processCommand();
}
});
});
});
</script>
</html>
Hmmm .... Tôi thấy bạn đã sử dụng một số CSS ở đây, thực sự là cần thiết phải không? – Navweb
Không. Tôi chỉ figured tôi muốn cung cấp cho bạn một giao diện điều khiển trông/cảm thấy/chức năng loại giống như DOS. Tôi tin rằng bạn có thể xóa hoàn toàn CSS và vẫn có chức năng này. – Brendan
Tôi cũng nhận ra rằng các lệnh của bạn là trường hợp nhạy cảm, do đó, có cách nào để làm cho nó trường hợp insensetive? Ví dụ - nếu tôi đã nhập: 'do_stuff'; Tôi cũng có thể nhập: 'dO_StUfF' – Navweb