In diesem Artikel wird der spezifische Code von js zur Implementierung eines einfachen Englisch-Chinesisch-Wörterbuchs zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. ZieleVerwenden Sie js, um eine einfache Englisch-Chinesisch-Wörterbuchabfragefunktion zu implementieren, um den Effekt einer Einzelwortsuche zu erzielen 2. Schritte zur Umsetzung1. Verwenden Sie eine JS-Datei, um alle Wörter im Englisch-Chinesischen Wörterbuch im Zeichenfolgenformat zu speichern 2. Trennen Sie in einem anderen JS-Datei- oder HTML-Seitenskript die Zeichenfolge der Datei, die das Vokabular enthält, in ein Array, fügen Sie die Map-Methode hinzu und durchlaufen Sie sie 3. Ordnen Sie den Inhalt des Suchfelds den Array-Elementen zu und geben Sie die Ergebnisse zurück 3. Code-Modul1.html Teil <div id="div1"> <input id='word' type="text" placeholder="Englisches Wort eingeben" /> <div id='absteigend'></div> </div> 2.css-Teil #div1 { Breite: 200px; Höhe: 200px; Polsterung: 50px; Hintergrundfarbe: hellgrau; Rand: 1px tief schwarz; Rand: 100px automatisch } #Wort { Breite: 200px; Höhe: 30px; Schriftgröße: 18px; } #desc { Breite: 200px; Höhe: 150px; Rand oben: 20px; Hintergrundfarbe: hellgrün } 3.js Teil <script src='demo.js'></script> <Skript> // Den String durch Zeilenumbrüche in ein Array aufteilen let arr = word.split("\n"); //Map-Methode erstellen let map = new Map(); // Durchlaufe das Array für (var i = 0; i < arr.length - 1; i += 2) { map.set(arr[i].substring(1), arr[i + 1].substring(6)); } fenster.onload = Funktion () { let oWord = document.getElementById("Wort"); let oDesc = document.getElementById("desc"); oWord.onkeyup = Funktion () { lass Wert = map.get(diesen.Wert); wenn (Wert) { oDesc.innerHTML = Wert; } anders { oDesc.innerHTML = "Kein solches Wort gefunden"; } } } </Skript> 4. Screenshot eines Vokabel-String-Fragments für externe Links von js 4. RendernDas Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8
Die React-Version beim Schreiben dieses Artikels ...
Heute zeige ich Ihnen, wie Sie mit JavaScript ein...
Dieser Artikel beschreibt anhand eines Beispiels,...
Ich habe gestern gerade etwas HTML gelernt und kon...
Inhaltsverzeichnis Ursache des Problems: Lösung: ...
Derselbe Server simuliert die Master-Slave-Synchr...
Vielleicht weiß jeder, dass die JS-Ausführung die...
Vorwort Ich bin ein PHP-Programmierer, der als Pr...
Vorwort Lassen Sie es mich hier zunächst erklären...
Linux-Dateiberechtigungen Überprüfen wir zunächst...
Es gibt in letzter Zeit zu viel Wissen zu lernen,...
Das CSS-Zählerattribut wird von fast allen Browse...
Der Befehl „Explain“ ist der erste empfohlene Bef...
Gemeinsame Eigenschaften von Tabellen Die grundle...
Inhaltsverzeichnis Private Klassenfelder in JavaS...