js implements a simple English-Chinese dictionary

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.

Recommend

How to implement element floating and clear floating with CSS

Basic Introduction to Floating In the standard do...

Implement group by based on MySQL to get the latest data of each group

Preface: The group by function retrieves the firs...

How to set list style attributes in CSS (just read this article)

List style properties There are 2 types of lists ...

Solve the problem of running hello-world after docker installation

Installed Docker V1.13.1 on centos7.3 using yum B...

Detailed View of Hidden Columns in MySQL

Table of contents 1. Primary key exists 2. No pri...

Complete step record of vue encapsulation TabBar component

Table of contents Implementation ideas: Step 1: C...

How to configure MySQL on Ubuntu 16.04 server and enable remote connection

background I am learning nodejs recently, and I r...

VUE+Express+MongoDB front-end and back-end separation to realize a note wall

I plan to realize a series of sticky note walls. ...

Tomcat8 uses cronolog to split Catalina.Out logs

background If the catalina.out log file generated...

Details on using order by in MySQL

Table of contents 1. Introduction 2. Main text 2....