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.cha.........完整代码请登录后点击上方下载按钮下载查看

网友评论0