js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch

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. Ziele

Verwenden Sie js, um eine einfache Englisch-Chinesisch-Wörterbuchabfragefunktion zu implementieren, um den Effekt einer Einzelwortsuche zu erzielen

2. Schritte zur Umsetzung

1. 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-Modul

1.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. Rendern

Das 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:
  • js und html5 realisieren den mobilen Rubbellos-Lotterieeffekt, perfekte Kompatibilität mit Android/IOS
  • Analyse des js-Roulette-Lotteriebeispiels
  • js-Lotterie, um einen zufälligen Lotteriecode-Effekt zu erzielen
  • jquery.rotate.js implementiert den Lotteriecode des Drehtellers mit optionaler Lotterienummer und Gewinninhalt
  • js einfacher Lotteriecode
  • js implementiert eine einfache Zufallslotteriemethode
  • js, um ein Beispiel für ein großes Drehscheibenlotteriespiel zu erreichen
  • Native JS realisiert den Effekt einer Neun-Quadrat-Lotterie
  • JavaScript-Programmcode für Zufallslotterie
  • Implementierungscode für den JS-Simulationslotteriesequenzeffekt

<<:  Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8

>>:  Eine Zusammenfassung der Wissenspunkte zur Datenbankindizierung. Alles, was Sie wissen müssen, finden Sie hier.

Artikel empfehlen

Zusammenfassung der Probleme bei der Installation von MySQL 5.7.19 unter Linux

Als ich MySQL zum ersten Mal auf meiner virtuelle...

JS+Canvas zeichnet ein Glücksrad

In diesem Artikel wird der spezifische Code der J...

So fragen Sie Datum und Uhrzeit in MySQL ab

Vorwort: Bei der Projektentwicklung werden in ein...

Windows 10 ist zu schwierig zu verwenden. Wie passen Sie Ihr Ubuntu an?

Autor | Herausgeber Awen | Produziert von Tu Min ...

Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt

Als Pflichtkurs für Frontend-Entwickler kann CSS3...

Zusammenfassung von 10 erweiterten Tipps für Vue Router

Vorwort Vue Router ist der offizielle Routing-Man...

So verwenden Sie vue3 zum Erstellen einer Materialbibliothek

Inhaltsverzeichnis Warum brauchen wir eine Materi...

Beispiel zum Ändern von Stilen über CSS-Variablen

Frage Wie ändere ich den CSS-Pseudoklassenstil mi...

Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren

Inhaltsverzeichnis Vorwort Was sind erstellbare S...

So legen Sie die Speichergröße von Docker Tomcat fest

Wenn Sie Tomcat in Docker installieren, kann es b...

JavaScript-Dom-Objektoperationen

Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...

HTML-Tags: Sub-Tag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...