js implements a simple English-Chinese dictionary

This article shares the specific code of js to implement a simple English-Chinese dictionary for your reference. The specific content is as follows

1. Objectives

Use js to implement a simple English-Chinese dictionary query function to achieve the effect of single word search

2. Implementation steps

1. Use a js file to save all the words in the English-Chinese dictionary as string format

2. In another js file or html page script, separate the string of the file containing the vocabulary into an array, add the Map method, and traverse it

3. Match the contents of the search box with the array elements and return the results

3. Code Module

1.html part

<div id="div1">
     <input id='word' type="text" placeholder="Enter English word" />
     <div id='desc'></div>
</div>

2.css part

#div1 {
            width: 200px;
            height: 200px;
            padding: 50px;
            background-color: lightgray;
            border: 1px solid black;
            margin: 100px auto
        }
 
        #word {
            width: 200px;
            height: 30px;
            font-size: 18px;
        }
 
        #desc {
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background-color: lightgreen
        }

3.js part

 <script src='demo.js'></script>
    <script>
        // Split the string into an array by line breaks let arr = word.split("\n");
 
        // Create Map method let map = new Map();
 
        // Traverse the array for (var i = 0; i < arr.length - 1; i += 2) {
            map.set(arr[i].substring(1), arr[i + 1].substring(6));
        }
 
        window.onload = function () {
            let oWord = document.getElementById("word");
            let oDesc = document.getElementById("desc");
 
            oWord.onkeyup = function () {
                let value = map.get(this.value);
                if (value) {
                    oDesc.innerHTML = value;
                } else {
                    oDesc.innerHTML = "No such word found";
                }
            }
        }
</script>

4.js external link vocabulary string fragment screenshot

4. Rendering

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js and html5 realize the mobile scratch card lottery effect, perfect compatibility with android/IOS
Analysis of js roulette lottery example
js lottery to achieve random lottery code effect
jquery.rotate.js implements the lottery code of the turntable with optional lottery number and winning content
js simple lottery code
js implements a simple random lottery method
js to achieve a large turntable lottery game example
Native JS realizes the effect of nine-square lottery
JavaScript random lottery program code
JS simulation lottery sequence effect implementation code

<<: Detailed tutorial on installing MariaDB on CentOS 8

>>: A summary of the knowledge points of database indexing. Everything you need to know is here.