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);
}
