xterm.js实现一个简单的web终端模拟器效果代码

代码语言:html

所属分类:其他

代码描述:xterm.js实现一个简单的web终端模拟器效果代码

代码标签: 简单 web 终端 模拟器 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xterm.3.14.5.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/xterm.css">
</head>
<body>
    <div id="terminal"></div>

	<script>
		var term = new Terminal({
			cursorBlink: "block"
		});

		var curr_line = '';
		var entries = [];
		var currPos = 0;
		var pos = 0;

		term.open(document.getElementById('terminal'));
		term.prompt = () => {
			term.write('\n\r' + curr_line + '\r\n\u001b[32mscm> \u001b[37m');
		};
		term.write('Welcome to my Scheme web intepreter!');
		term.prompt();

		term.on('key', function(key, ev) {
		    console.log(key);
		    console.log(ev);
			const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey &&
				!(ev.keyCode === 37 && term.buffer.cursorX < 6);

			if (ev.keyCode === 13) { // Enter key
				if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
					entries.push(curr_line);
					currPos = entries.length - 1;
					term.prompt();
				} else {
					term.write('\n\33[2K\r\u001b[32mscm> \u001b[37m');
				}
				curr_line = '';
			} else if (ev.keyCode === 8) { // Backspace
				if (term.buffer.cursorX > 5) {
					curr_line = curr_line.slice(0, term.buffer.cursorX - 6) + curr_line.slice(term.buffer.cursorX - 5);
					pos = curr_line.length - term.buffer.cursorX + 6;
					term.write('\33[2K\r\u001b[32mscm> \u001b[37m' + curr_.........完整代码请登录后点击上方下载按钮下载查看

网友评论0