ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML模倣コマンドラインインターフェースの具体的な実装方法

HTML模倣コマンドラインインターフェースの具体的な実装方法

高洛峰
リリース: 2017-03-09 16:06:01
オリジナル
2722 人が閲覧しました

この記事では、HTML 模倣コマンド ライン インターフェイスの具体的な実装を紹介します。興味のある方はぜひご覧ください。 HTML 部分

コードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>WeChat Manager</title>

<link href="css/index.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js">

</script>

<script>

$(document).ready(function(){

$(document).keyup(function(event){

if(event.keyCode ==13){

$.ajax({

type: "POST",

url: "ok.php",

data: "code="+$("#in").val(),

success: function(msg){

$("ul").append("<li>"+$("#in").val()+"</li>"); //将输入的输出到界面

$("ul").append("<li>"+msg+"</li>"); //获取返回值并输出

$("#in").val(""); //清空输入框

$("#text").scrollTop($("#text").scrollTop()+32);//滚动条拉到最下面,显示出输入框

}

});

}

});

$("#in")[0].focus();

});

</script>

</head>

<body>

<p class="window">

<p class="title">

<img  src="/static/imghw/default1.png"  data-src="css/1.jpg"  class="lazy"   alt="HTML模倣コマンドラインインターフェースの具体的な実装方法" >

<span>Wechat Dos</span>

</p>

<p id="text">

<ul>

<li>Welcome...</li>

<li>login:</li>

</ul>

<input type="text" name="" id=&#39;in&#39;>

</p>

</p>

</body>

</html>

ログイン後にコピー


CSS 部分

コードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

@charset "utf-8";

body {

background-color:#396DA5;

margin:0px;

padding:0px;

color:#fff;

font:"微软雅黑";

font-size:14px;}

.window {

border:6px #ccc outset;

width:680px;

height:442px;

background-color:#000;

position:absolute;

top:40px;

left:68px;

overflow:hidden}

.title {

background-color:#08246B;

padding:2px;}

#text {

background-color:#000;

border-top:#ccc outset 2px;

height:420px;

overflow-y:scroll;}

ul {

margin:0px;

padding:0px;

list-style:none;}

input {

background-color:#000;

border:0;

color:#fff;

outline:none;

/*font-size:12px;*/

width:100%}

ログイン後にコピー


レンダリング:
HTML模倣コマンドラインインターフェースの具体的な実装方法

以上がHTML模倣コマンドラインインターフェースの具体的な実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
HTMLの概要
から 1970-01-01 08:00:00
0
0
0
HTMLの概要
から 1970-01-01 08:00:00
0
0
0
HTMLとHTML5の違い
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート