HTML コマンドラインインターフェースの実装

HTML部分

コードをコピー

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

<!DOCTYPE html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>WeChat マネージャー</title>
<link href="css/index.css" rel="スタイルシート" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</スクリプト>
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).keyup(関数(イベント){
イベントキーコード == 13 の場合
$.ajax({
タイプ: "POST",
URL: "ok.php",
データ: "code="+$("#in").val(),
成功: function(msg){
$("ul").append("<li>"+$("#in").val()+"</li>"); // 入力をインターフェースに出力します
$("ul").append("<li>"+msg+"</li>"); //戻り値と出力を取得します
$("#in").val(""); //入力ボックスをクリア
$("#text").scrollTop($("#text").scrollTop()+32); //バーを一番下までスクロールして入力ボックスを表示します
}
});
}
});
$("#in")[0].focus();
});
</スクリプト>
</head>
<本文>
<div class="window">
<div class="title">
<img src="css/1.jpg">
<span>Wechat の注意事項</span>
</div>
<div id="テキスト">
<ul>
<li>ようこそ...</li>
<li>ログイン:</li>
</ul>
<input type="text" name="" id='in'>
</div>
</div>
</本文>
</html>

CSS部分

コードをコピー

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

@文字セット "utf-8";
体 {
背景色:#396DA5;
マージン:0px;
パディング:0px;
色:#fff;
フォント:"Microsoft YaHei";
フォントサイズ:14px;}
.ウィンドウ{
border:6px #ccc アウトセット;
幅:680ピクセル;
高さ:442px;
背景色:#000;
位置:絶対;
上:40px;
左:68px;
オーバーフロー:非表示}
。タイトル {
背景色:#08246B;
パディング:2px;}
＃文章 {
背景色:#000;
上境界線:#ccc アウトセット 2px;
高さ:420px;
オーバーフロー-y:スクロール;}
ul {
マージン:0px;
パディング:0px;
リストスタイル:なし;}
入力{
背景色:#000;
境界線:0;
色:#fff;
アウトライン:なし;
/*フォントサイズ:12px;*/
幅:100%}

効果画像: