JavaScript 虚拟小终端

最新推荐文章于 2024-09-10 08:37:57 发布

转载最新推荐文章于 2024-09-10 08:37:57 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/nichijou/blog/750453

文章标签：

#javascript #python #ViewUI

本文介绍了一个使用HTML、CSS及JavaScript实现的简易终端模拟器。该模拟器支持基本的命令如ls、exit、clear等，并可通过cat命令查看预定义文件的内容。此外，还实现了touch创建文件及modify修改文件内容的功能。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Terminal</title>
    <script src="./script/jquery.min.js"></script>
    <style>
        * {
            margin: 0 0;
        }
        #terminal {
            width: 1440px;
            height: 810px;
            position: absolute;
            background: black;
            color: white;
        }

        #cmdInput, #cmdHist {
            width: 1px;
            height: 1px;
        }
    </style>
    <script>
        $(() => {
            var files = ['sys.log', 'var.log', 'hist.log']

            var content = {
                'sys.log':'this is sys.log',
                'var.log':'this is var.log',
                'hist.log':'this is hist.log',
            };

            var is_Show = true;
            var hist = 'root@web# ';
            const ps = 'root@web# ';

            $('#contHist').text(hist);

            $('#cmdInput').focus();
            
            $('#cmdInput').on('input', () => {
                const cmd = $('#cmdInput').val();
                $('#content').text(cmd);
                
            });
            function ls() {
                hist += '<br>';
                for (let idx in files) {
                    hist += files[idx] + ' ';
                }
                hist += '<br>';
            }

            function exit() {
                $('#terminal').hide();
            }

            function clear() {
                hist = '';
            }

            function cat(args) {
                hist += '<br>';
                for (let i = 1; i < args.length; i++) {
                    hist += content[args[i]] + '<br>';
                }
            }

            function touch(args) {
                for (let i = 1; i < args.length; i++) {
                    content[args[i]] = '';
                    files.push(args[i]);
                }
                hist += '<br>';
            }

            function modify(args) {
                content[args[1]] = args[2];
                hist += '<br>';
            }
            function err() {
                hist += '<br> command does not exist ! <br>';
            }

            $(window).on('keydown', (evt) => {
                const key = evt.which;
                if (evt.which === 13) {

                    hist += $('#content').text();
                    const cmd = $('#content').text();
                    var args = cmd.split(' ');

                    if (args[0] === 'ls') ls();
                    else if (args[0] === 'exit') exit();
                    else if (args[0] === 'clear') clear();
                    else if (args[0] === 'cat') cat(args);
                    else if (args[0] === 'touch') touch(args);
                    else if (args[0] === 'modify') modify(args);
                    else err();
                    hist += ps;
                    $('#cmdHist').text(hist);
                    $('#contHist').html(hist);
                    $('#content').text('');
                    $('#cmdInput').val('');
                }
            });

            setInterval(() => {
                if (is_Show) {
                    is_Show = false;
                    $('#underline').hide();
                } else {
                    is_Show = true;
                    $('#underline').show();
                }
            }, 700);

        });
    </script>
</head>
<body>
    <div id="terminal">
        <span id="contHist"></span>
        <span id="content"></span>
        <span id="underline">_<span>
    </div>
    <input id="cmdInput" type="text">
    <textarea id="cmdHist"></textarea>
</body>
</html>

显然只有一个虚拟目录 && 并没有高级的功能