57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<script type="text/javascript" src="./static/js/terminal/index.js"></script>
|
|
<script type="text/javascript" src="./static/js/terminal/lru.js"></script>
|
|
<script type="text/javascript" src="./static/js/terminal/canvas-xterm.js"></script>
|
|
<style type="text/css">
|
|
.term {
|
|
color: #fff;
|
|
background-color: #181818;
|
|
font: 13px/1.5 Consolas, sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="term" class="term"></div>
|
|
<div class="term" style="margin-top: 10px;">
|
|
<canvas id="term-canvas"></canvas>
|
|
</div>
|
|
<script>
|
|
var xterm = new AnsiTerminal(120, 80, 0);
|
|
var canvasXTerm = new CanvasXTerm();
|
|
var termNode = document.getElementById('term');
|
|
var termCanvas = document.getElementById('term-canvas');
|
|
var brush = termCanvas.getContext('2d');
|
|
|
|
xterm.debug = false;
|
|
xterm.newline_mode = true;
|
|
|
|
function write(){
|
|
[
|
|
' \u001b[36;1mgulp-cmd \u001b[0mconcat: \u001b[35mAssets/js/util/ztree/3.5.0/css/img/diy/8.png\u001b[39m start\u001b[36m +0ms\u001b[0m',
|
|
' \u001b[36;1mgulp-cmd \u001b[0mconcat: \u001b[35mAssets/js/util/ztree/3.5.0/css/img/diy/8.png\u001b[39m ...ok\u001b[36m +0ms\u001b[0m'
|
|
].forEach(function (line){
|
|
xterm.write(line + ' ' + new Date().toISOString() + '\n');
|
|
});
|
|
|
|
xterm.write('\n \033[4;41;32m红底下划线绿字\033[0m\n ' + new Date().toISOString() + '\n\n');
|
|
|
|
termNode.innerHTML = xterm.toString('html');
|
|
|
|
canvasXTerm.draw(xterm.styles());
|
|
|
|
termCanvas.width = canvasXTerm.canvas.width;
|
|
termCanvas.height = canvasXTerm.canvas.height;
|
|
|
|
brush.drawImage(canvasXTerm.canvas, 0, 0);
|
|
|
|
setTimeout(write, 1000 - new Date().getMilliseconds());
|
|
}
|
|
|
|
write();
|
|
</script>
|
|
</body>
|
|
</html> |