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

推薦する

高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明

デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

nginx 設定ファイルで環境変数を使用する方法

序文Nginx はパフォーマンスを重視して設計された HTTP サーバーです。Apache や li...

MySQL の時間設定に関する考慮事項の詳細な要約

時間は本当に存在するのでしょうか？時間は人間が考え出した概念に過ぎず、物事の変化を測る基準に過ぎない...

Windows10 mysql 8.0.12 非インストール版 設定 起動方法

この記事では、MySQL 8.0.12のインストールされていないバージョンを設定して起動するための具...

Docker での環境変数の使用とよくある問題の解決策

序文Docker はコンテナの環境変数を設定できます。設定方法は 2 つあります。イメージを作成する...

MySQL は、現在のデータ テーブル内のすべての時間に対して指定された時間間隔を増加または減少させます (推奨)

DATE_ADD() 関数は、指定された時間間隔を日付に追加します。現在のテーブル内のすべてのデー...

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...

JavaScriptの動作原理を理解しましょう

目次ブラウザカーネルJavaScript エンジンV8エンジンJavaScript がどのように実行...

画像をMySQLデータベースに保存し、フロントエンドページに表示するための実装コード

目次1. まず、pycharmを使用してDjangoプロジェクトを作成し、関連する環境を設定します。...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

Tomcat のセッションと Cookie の詳細な説明

序文HTTP はステートレスな通信プロトコルです。各リクエストは互いに独立しており、サーバーは以前の...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

Vue の計算プロパティとプロパティリスニングについての簡単な説明

目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング（...