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 Nginx zum Proxy mehrerer Anwendungssites in Docker
>>: Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text
Artikel empfehlen
So verwenden Sie wangEditor in Vue und erhalten durch Echo von Daten den Fokus
Bei der Hintergrundverwaltung von Projekten werde...
Gründe, warum MySQL Kill Threads nicht beenden kann
Inhaltsverzeichnis Hintergrund Problembeschreibun...
So installieren Sie die PHP7 Redis-Erweiterung auf CentOS7
Einführung Im vorherigen Artikel haben wir Redis ...
Detaillierte Erklärung des Sticky Position-Attributs in CSS
Beim Entwickeln mobiler Apps stoßen Sie häufig au...
HTML-Zeichnungsbenutzer-Registrierungsseite
In diesem Artikel wird der spezifische Implementi...
Lösung für zu große Mysql-Binlog-Protokolldateien
Inhaltsverzeichnis 1. Verwandte Binlog-Konfigurat...
Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter
Webseite WB.ExecWB-Steuerungsdruckmethode Code ko...
Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung
Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...
Überwachen Sie die Größenänderung eines DOM-Elements über Iframe
Ein während des Entwicklungsprozesses häufig auft...
Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)
Rendern Häufig verwendete Stile im Blog Garden /*...
Bei der Installation von Docker Desktop wird eine Fehlermeldung angezeigt: Die WSL 2-Installation ist unvollständig (Beheben Sie die Fehlermeldung).
Fehlerbeschreibung Wenn wir Docker Desktop instal...
Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung
Inhaltsverzeichnis Vorwort -Link Benutzerdefinier...
Docker-Umgebung in Linux-Umgebung installieren (keine Fallstricke)
Inhaltsverzeichnis Installationsvoraussetzungen S...
Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist
Inhaltsverzeichnis nächstesTick Syntaxvereinfachu...
Fassen Sie die Probleme zusammen, die bei der Verwendung der Vue Element-Benutzeroberfläche auftreten
Inhaltsverzeichnis 1. DateTimePicker Datumsauswah...