Verwenden von JavaScript-Unterschieden zum Implementieren eines Vergleichstools

Vorwort

Bei der Arbeit muss ich jede Woche die von den Mitarbeitern eingereichten Materialien zählen, möchte sie aber nicht einzeln kopieren und einfügen. Deshalb muss ich ein kleines Tool schreiben, mit dem ich herausfinden kann, wer die Materialien nicht eingereicht hat.

Lassen Sie uns zuerst die Seite reparieren

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    Textbereich {
      /* Rand: keiner; */
      Breite: 49 %;
      Höhe: 400px;

      /* Schriftgröße: 17pt; */

    }
    #btn {
      Breite: 100 %;
      Höhe: 50px;
      Position: relativ;
      oben: 0px;
      /* Position: absolut; */
    }

    #p2 {
      Rand links: 940px;
      Rand oben: -38px;
    }
  </Stil>
</Kopf>
<Text>
  <button id="btn" class="ambi-light-button">Vergleichen</button>
  <textarea id="txt" type="text" placeholder="Sollte übermittelt werden"></textarea>
  <textarea id="txt2" type="text" placeholder="Übermittelt"></textarea>
  <hr>
  <p>Nicht übermittelt</p>
  <p id="p2">Liste der abwesenden Personen wurde eingereicht</p>
  <textarea id="txt3" type="text" placeholder="Nicht übermittelt"></textarea>
  <textarea id="txt4" type="text" placeholder="Übermittelte Liste von Personen, die nicht auf der Liste stehen"></textarea>
</body>
</html>

Ein bisschen hässlich, aber es macht nichts, wenn man es selbst benutzt

Beginnen Sie mit dem Schreiben von JS-Code

<Skript
 //Holen Sie sich zuerst das Eingabefeld und die Schaltfläche let txt = document.querySelector('#txt')
  let txt2 = document.querySelector('#txt2')
  let txt3 = document.querySelector('#txt3')
  let txt4 = document.querySelector('#txt4')
  let btn = document.querySelector('#btn')
 //Dann schreibe ein Array um die Differenz zu finden const getDifference = function (a, b) {
   //Erklärung: Wenn die beiden übergebenen Funktionen Arrays sind, if (a.constructor === Array && b.constructor === Array) {
      set1 = neues Set(a);
      sei set2 = neues Set(b);
      // Verwenden Sie Set, um Duplikate zu entfernen, und filtern Sie, um den Unterschied zu finden. return Array.from(new Set([...set1].filter(x => !set2.has(x))));
    }
    gibt null zurück;
  }
  // Geben Sie dem Button einfach ein Klickereignis btn.onclick = function () {
    //Liste der Personen, die einreichen sollten let Should_sub = txt.value.split('\n')
    //Liste der Personen, die noch nichts eingereicht haben let already_sub = txt2.value.split('\n')
    let l3 = getDifference(Sollte_sub, bereits_sub)
    //Anzahl der Personen, die nicht in der Liste eingetragen sind let l4 = getDifference(already_sub, Should_sub)
    //Die gefilterten Werte werden an die beiden Eingabefelder auf der Seite zurückgemeldet txt3.value = l3.join('\n')
    txt4.Wert = l4.join('\n')
  }
  </Skript>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von JavaScript-Unterschieden zur Implementierung eines Vergleichs-Widgets. Weitere relevante Inhalte zum Vergleichs-Widget für die Implementierung von JS-Unterschieden finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

So verwenden Sie node.js, um ein kleines Tool zum Generieren von Einzelbildanimationen zu entwickeln
Node.js implementiert Ticket-Grabbing-Gadget und SMS-Benachrichtigungserinnerungsfunktion
Java9s JShell-Gadget und Compiler zwei automatische Optimierungsmethoden
Node.js implementiert ein Tool zum Zusammenführen von JS-Dateien
JavaScript erstellt ein kleines Tool zum Konvertieren von SQL in StringBuffer
Theorie zum Erstellen eines Bookmarklets mit js
Ein kleines Tool für den geplanten Neustart oder das Herunterfahren, geschrieben in hta[javascript]
Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses

<<: So verwenden Sie Nginx zum Proxy mehrerer Anwendungssites in Docker

>>: Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text

Pygame-Code zum Erstellen eines Schlangenspiels

Verwenden von JavaScript-Unterschieden zum Implementieren eines Vergleichstools

Pygame-Code zum Erstellen eines Schlangenspiels

Implementierung der Remote-Linux-Entwicklung mit vscode

Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte

Hinweise zum Zeichengerätetreiber des Linux-Kernel-Gerätetreibers

Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind

Bei der Verwendung von MySQL aufgetretene Probleme

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

Wie kompliziert ist die Priorität von CSS-Stilen?

HTML-Formular_PowerNode Java Academy

Vor- und Nachteile von Vite und Vue CLI

Artikel empfehlen

MySQL sollte niemals Update-Anweisungen wie diese schreiben

Prinzip des Ladens von Docker-Images

mysql ist keine interne Befehlsfehlerlösung

Automatisierte Schnittstellentests mit Postman

Das WeChat-Applet verwendet die Videoplayer-Videokomponente

Detaillierte Erläuterung gängiger Vorgänge für Docker-Images und -Container

Beispiele für dl-, dt- und dd-Listenbezeichnungen

Optimierung der Frontend-Leistung von Websites: JavaScript und CSS

Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern

Vue+echarts realisiert Fortschrittsbalken-Histogramm

Detaillierte Schritte zur Installation von MySQL 8.0.18-winx64 unter Win10

CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode

So konfigurieren Sie MySQL8 in Nacos

Ausführliche Erläuterung des Fehlers beim Schreiben von SQL mit englischen einfachen Anführungszeichen "''"

Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis