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環境を構築して構成するプロセス

推薦する

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

MySQL パフォーマンス最適化インデックス プッシュダウン

インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...

JS 関数とコンストラクタを簡単に理解する

目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法

本体の幅をウィンドウの幅に設定します（次のスクリプトで制御されます） $("body&qu...

MySQLの文字タイプは大文字と小文字を区別します

デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

[LeetCode] 183.注文しない顧客Web サイトに、Customers テーブルと Or...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

MySQL (InnoDB) がデッドロックを処理する方法の詳細な説明

1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...

CSSボックスモデルの紹介を読めば、混乱することはなくなるでしょう

Web デザインでよく耳にするプロパティ名: content、padding、border、marg...

mysql と oracle のデフォルトのトランザクション分離レベルの説明

1. トランザクション特性（ACID） （１）原子性トランザクションに関係するプログラムによって実行...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...