html-css 命令行界面 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Terminal</title>
  8 
  9     <link rel="stylesheet" href="index.css">
 10     <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
 11 </head>
 12 <body>
 13     <div class="terminal">
 14         <pre class="output">2019-02-04</pre>
 15         <div class="input-box">
 16             <span class="input-span"></span>
 17             <input type="text" class="input">
 18         </div>
 19     </div>
 20 
 21     <script type="text/javascript">
 22         $(function(){
 23 
 24             var terminal = $('.terminal');
 25             var input = $('.input');
 26             var input_box = $('.input-box');
 27 
 28             var width = terminal.width();
 29 
 30             console.log(width);
 31 
 32             var commands = [
 33                             {
 34                                 "name": "clear",
 35                                 "function": clearConsole
 36                             }, 
 37                             {
 38                                 "name": "help",
 39                                 "function": help
 40                             }
 41                         ];
 42 
 43             terminal.on('click',()=>{
 44                 input.focus();
 45             })
 46 
 47             input.on('keypress',function(e){
 48                 if(e.keyCode == 13)
 49                 {
 50                     print(input.val());
 51                 }
 52             })
 53 
 54             input.bind('input propertychange', function() {
 55                 var $this = $(this);
 56                 console.log($this);
 57                 var text_length = $this.val().length;//获取当前文本框的长度
 58                 var current_width = parseInt(text_length) *16;//该16是改变前的宽度除以当前字符串的长度,算出每个字符的长度
 59                 console.log(current_width)
 60                 $this.css("width",current_width+"px");
 61             });
 62 
 63             setInterval(()=>{
 64                 if(input.is(":focus"))
 65                 {
 66                    ;
 67                 }
 68                 else
 69                 {
 70                     input.focus();
 71                 }
 72             },1000)
 73             
 74             //function
 75             function help() {
 76 
 77             }
 78 
 79             function clearConsole() {
 80                 terminal.children('pre').remove();
 81             }
 82 
 83             function print(cmd)
 84             {
 85                 var msg;
 86 
 87                 if(searchCmd(cmd)){
 88                     msg = "2019-02-04";
 89                 }
 90                 else
 91                 {
 92                     msg = cmd;
 93                 }
 94 
 95                 input_box.before('<pre class="output">' + msg + '</pre>');
 96                 input.val("");
 97                 input.css('width','1px');
 98 
 99                 //内容保持在底部
100                 terminal.scrollTop(terminal[0].scrollHeight);
101             }
102 
103             function searchCmd(cmd){
104                 for(var i=0;i<commands.length;i++)
105                 {
106                     if(cmd == commands[i].name)
107                     {
108                         commands[i].function();
109                         return true;
110                     }
111                 }
112                 return false;
113             }
114 
115         })
116 
117     </script>
118 </body>
119 </html>

 

html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
html .terminal::-webkit-scrollbar,
body .terminal::-webkit-scrollbar {
  display: none;
}
html .terminal,
body .terminal,
html .input,
body .input {
  font-weight: 260;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  overflow-y: scroll;
}
html .terminal,
body .terminal {
  width: 640px;
  height: 480px;
  position: absolute;
  left: 50px;
  top: 50px;
  padding: 10px;
  background-color: #000000;
  color: #0add0a;
  overflow: hidden;
  overflow-y: auto;
}
html .terminal .output,
body .terminal .output {
  font-weight: 260;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}
html .terminal .input-span::before,
body .terminal .input-span::before,
html .terminal .output::before,
body .terminal .output::before {
  content: "root@xyqz~$ ";
}
html .terminal .input-span::before,
body .terminal .input-span::before {
  font-weight: 100;
  font-size: 0.9em;
}
html .terminal .input,
body .terminal .input {
  font-size: 1em;
  min-width: 1px;
  height: inherit;
  border: none;
  outline: none;
  color: #0add0a;
  background-color: rgba(0, 0, 0, 0);
}

posted @ 2019-11-18 23:35  Yan327  阅读(757)  评论(0)    收藏  举报