JavaScript の差異を利用して比較ツールを実装する

JavaScript の差異を利用して比較ツールを実装する

序文

仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるのは面倒なので、誰が資料を提出していないかを見つけるのに役立つ小さなツールを作成する必要があります。

まずはページを修正しましょう

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <スタイル>
    テキストエリア {
      /* 境界: なし; */
      幅: 49%;
      高さ: 400px;

      /* フォントサイズ: 17pt; */

    }
    #ボタン{
      幅: 100%;
      高さ: 50px;
      位置: 相対的;
      上: 0px;
      /* 位置: 絶対; */
    }

    #p2 {
      左マージン: 940px;
      上マージン: -38px;
    }
  </スタイル>
</head>
<本文>
  <button id="btn" class="ambi-light-button">比較</button>
  <textarea id="txt" type="text" placeholder="送信する必要があります"></textarea>
  <textarea id="txt2" type="text" placeholder="送信済み"></textarea>
  <時間>
  <p>送信されていません</p>
  <p id="p2">欠席者リストが提出されました</p>
  <textarea id="txt3" type="text" placeholder="未送信"></textarea>
  <textarea id="txt4" type="text" placeholder="リストに載っていない人のリストを送信しました"></textarea>
</本文>
</html>

ちょっと醜いけど、自分で使う分には問題ない

JSコードを書き始める

<スクリプト
 //まず入力ボックスとボタンを取得します。let txt = document.querySelector('#txt')
  txt2 = document.querySelector('#txt2') とします。
  txt3 = document.querySelector('#txt3') とします。
  txt4 = document.querySelector('#txt4') とします。
  btn = document.querySelector('#btn') とします。
 //次に、差を求める配列を記述します。const getDifference = function (a, b) {
   //説明: 渡された 2 つの関数が配列の場合 if (a.constructor === Array && b.constructor === Array) {
      set1 = new Set(a);
      set2 = new Set(b);
      // Set を使用して重複を削除し、フィルターを使用して差異を検索します。 return Array.from(new Set([...set1].filter(x => !set2.has(x))));
    }
    null を返します。
  }
  // ボタンにクリックイベントを与えるだけです btn.onclick = function () {
    // 提出すべき人のリスト let Should_sub = txt.value.split('\n')
    //まだ提出していない人のリスト let already_sub = txt2.value.split('\n')
    l3 = getDifference(Should_sub, already_sub) とします。
    // リストに提出されていない人数 let l4 = getDifference(already_sub, Should_sub)
    //フィルタリングされた値はページ上の2つの入力ボックスにフィードバックされます txt3.value = l3.join('\n')
    txt4.値 = l4.join('\n')
  }
  </スクリプト>

要約する

JavaScript の差分を使用して比較ウィジェットを実装する方法についての記事はこれで終わりです。より関連性の高い JS 差分実装の比較ウィジェットのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • node.js を使用してフレームごとのアニメーションを生成する小さなツールを開発する方法
  • Node.js がチケット取得ガジェットと SMS 通知リマインダー機能を実装
  • Java9のJShellガジェットとコンパイラの2つの自動最適化方法
  • Node.jsはJSファイルマージツールを実装します
  • JavaScript は SQL を stringBuffer に変換する小さなツールを作成します
  • jsでブックマークレットを作成する理論
  • hta[javascript] で書かれた、スケジュールされた再起動またはシャットダウンのための小さなツール
  • 建国記念日が近づいています。JS を使用して、建国記念日風のアバターを生成する小さなツールを実装します。実装プロセスの詳細な説明

<<:  Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

>>:  MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

推薦する

js の一般的でない演算子と演算子の概要

一般的な演算子と JavaScript の演算子の概要カテゴリオペレーター算術演算子+、–、*、/、...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

Linux におけるゼロコピー技術の使用に関する簡単な分析

この記事では、Linux におけるいくつかの主要なゼロコピー テクノロジと、ゼロコピー テクノロジを...

Dockerを使用してコンテナリソースを制限する方法

覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法

序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...

Docker で Let's Encrypt から永久無料 SSL 証明書を取得する方法

1. 原因公式の cerbot は面倒すぎます。野生の成長よりもさらに悪い acme.sh の使用は...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

Zabbix で監視項目と集約されたグラフを設定するためのサンプルコード

1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...