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
Tutorial zu HTML-Formular-Tags (4):
Nehmen Sie nun an, dass Sie dem Formular ein Elem...
Mysql 5.7.17 Winx64-Installationstutorial auf Win7
Softwareversion und Plattform: MySQL-5.7.17-winx6...
Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs
01PARTCoreWebApi Tutorial Lokale Demonstrationsum...
Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8
Schritt 1: yum install httpd -y #httpd-Dienst ins...
Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker
My97DatePicker ist ein sehr flexibles und benutze...
MySQL 5.7.20 Zip-Installations-Tutorial
MySQL 5.7.20 Zip-Installation, der spezifische In...
Einige Tipps zur Verwendung von Less in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...
Der Unterschied und die Verwendung von json.stringify() und json.parse()
1. Unterschiede zwischen JSON.stringify() und JSO...
Verwendung des Linux-Dateibefehls
1. Befehlseinführung Der Dateibefehl wird verwend...
Beispiel für die Verwendung verschachtelter HTML-Seiten (Frameset-Verwendung)
Code kopieren Der Code lautet wie folgt: <!DOC...
JavaScript, um den Effekt des Klickens auf das selbst erstellte Menü zu erzielen
In diesem Artikel wird der spezifische JavaScript...
Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit
Um das Benutzererlebnis und die Benutzerfreundlich...
Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud
Inhaltsverzeichnis 0. Hintergrund 1. Installation...
Detaillierte Erklärung des Prinzips und der Verwendung des Cursors (DECLARE) in der gespeicherten MySQL-Prozedur
Dieser Artikel veranschaulicht anhand von Beispie...
So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern
Wenn Sie CSS-Pseudoelemente zur Steuerung von Ele...