js模拟可以输入命令执行命令的命令行交互效果代码-html代码-BFW代码库

js模拟可以输入命令执行命令的命令行交互效果代码

代码语言：html

所属分类：其他

代码描述：js模拟可以输入命令执行命令的命令行交互效果代码

代码标签： js 命令行

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

<!doctype html>
<html>


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden
}

#screen {
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: scroll
}

#Container,#Container>div {
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

#wrapper {
    display: table-cell;
    vertical-align: bottom;
    height: 100%
}

.log {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px
}

.log p {
    color: #00e676;
    font-family: 'Source Code Pro',monospace;
    margin: 0
}

#input {
    padding-left: 10px;
    padding-right: 10px
}

#input p {
    color: #00e676;
    display: inline-block;
    font-family: 'Source Code Pro',monospace;
    padding-right: .4em;
    margin: 0
}

#input input {
    width: 85%;
    display: inline-block
}

input[type="command"] {
    background-color: black;
    border: 0;
    color: #00e676;
    font-family: 'Source Code Pro',monospace;
    font-size: 16px;
    outline: 0
}
    </style>

</head>

<body>
    <div id="screen">
        <div id="Container">
            <div id="input">
                <p id="input_title"></p><input id="input_source" type="command" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus></div>
            <div id="logger">
                <div id="wrapper"></div>
            </div>
        </div>
    </div>
    <script>
        function smart_split(input, del, empty_space) {
            if (input.length === 0) return input;
            var outputs = [""];
        
            var compare = function(base, insert, position) {
                if ((position + insert.length) > base.length) return false;
                for (var i = 0; i < insert.length; i++) {
                    if (!(base.charAt(position + i) === insert.charAt(i))) return false;
                }
                return true;
            };
        
            var quotes = false;
            for (var i = 0; i < input.length; i++) {
                var char = input.charAt(i);
                if (char === '"') {
                    quotes = !quotes;
                    continue;
                }
        
                if (!quotes && compare(input, del, i)) {
                    outputs.push("");
                    i += del.length - 1;
                    continue;
                }
        
                outputs[outputs.length-1] += char;
            }
        
            if (!empty_space) {
                for (var i = 0; i < outputs.length; i++) {
                    if (outputs[i] === "") {
                        outputs.splice(i, 1);
                    }
                }
            }
        
            return outputs;
        }
        
        var terminal_user_title = "C: SWS/Kevin";
        
        function update_user_title(title) {
            terminal_user_title = title;
            document.getElementById("input_title").innerText = terminal_user_title + " > ";
        }
    .........完整代码请登录后点击上方下载按钮下载查看