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 をよろしくお願いいたします。

以下もご興味があるかもしれません: