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

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%}

効果画像:

<<:  HTMLページ作成に関する私の経験の簡単な要約

>>:  DockerでGit環境を構築して構成するプロセス

推薦する

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

1 分で Nginx のバージョンをスムーズにアップグレードおよびロールバックする方法

今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...

JavaScriptはオブジェクトの不要なプロパティを削除します

目次例方法1: 削除方法2: 分解補充する要約するThinking シリーズは、10 分で実用的なプ...

よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)

元の URL: http://segmentfault.com/blog/ciaocc/119000...

MySQL データベース アーキテクチャの詳細

目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

Vue のルータールーティングの 2 つのモード (ハッシュと履歴) の詳細な説明

ハッシュモード（デフォルト）動作原理:ウェブページのハッシュ値の変化を監視する—> onhas...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

MySQL 8.0 の非表示インデックスの詳細な説明

言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

MySQL ストアド プロシージャと共通関数のコード分析

mysql ストアド プロシージャの概念:特定のタスク (クエリと更新) を実行できる、データベース...

docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します

1. docker-maven-pluginの紹介私たちの継続的インテグレーションプロセスでは、プロ...

TypeScriptにおけるunknownとanyの違いについて詳しく説明します

目次序文1. 不明 vs 任意2. 未知とあらゆるもののメンタルモデル3. まとめ要約する序文any...