本文例項為大家分享了實現簡易的英漢詞典的具體程式碼，供大家參考，具體內容如下

一、目標

利用js實現簡易的英漢詞典查詢功能，達到單個詞彙查詢的效果

二、實現步驟

1.用一個js檔案儲存所有英漢詞典的詞彙為字串樣式

2.在另一個js檔案或者html頁面的script裡將裝有詞彙的檔案的字串分隔成陣列，新增Map方法，並進行遍歷

3.將搜尋框的內容與陣列元素匹配返回結果

三、程式碼模組

1.html部分

<div id="div1">
     <input id='word' type="text" placeholder="輸入英文單詞" />
     <div id='desc'></div>
</div>

2.部分

#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部分

 <script src='demo.js'></script>
    <script>
        // 將字串通過換行進行字串分割為陣列
        let arr = word.split("\n");
 
        // 建立Map方法
        let map = new Map();
 
        // 遍歷陣列UVexDZ
        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 {
                    oDeshttp://www.cppcns.comc.innerHTML = "查無此詞";
                }
            }
        }
</script>

4.js外鏈詞彙字串片段截圖

四、效果圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。