xterm.js实现一个简单的web终端模拟器效果代码
代码语言:html
所属分类:其他
代码描述:xterm.js实现一个简单的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