js實現簡易的英漢詞典
本文實例為大家分享了js實現簡易的英漢詞典的具體代碼,供大家參考,具體內容如下
一、目標
利用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.css部分
#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"); // 創(chuàng)建Map方法 let map = new Map(); // 遍歷數組 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 = "查無此詞"; } } } </script>
4.js外鏈詞匯字符串片段截圖
四、效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
如何確保JavaScript的執(zhí)行順序 之實戰(zhàn)篇
我曾在文章《如何在多個頁面使用同一個HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現代瀏覽器可以并行的下載JavaScript(部分瀏覽器),但考慮到JavaScript的依賴關系,他們的執(zhí)行依然是按照引入順序進行的。2011-03-03基于JavaScript實現根據手機定位獲取當前具體位置(X省X市X縣X街道X號)
這篇文章主要介紹了基于JavaScript實現根據手機定位獲取當前具體位置(X省X市X縣X街道X號)的相關資料,需要的朋友可以參考下2015-12-12js如何使用Pagination+PageHelper實現分頁
本文主要介紹了js如何使用Pagination+PageHelper實現分頁,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06Javascript中定義方法的另類寫法(批量定義js對象的方法)
用了很多的Javascript框架,偶爾也會去看一下框架的源碼,經常會看到這樣的代碼。2011-02-02JS禁止瀏覽器右鍵查看元素或按F12審查元素自動關閉頁面示例代碼
這篇文章主要給大家介紹了關于利用Javascript如何禁止瀏覽器右鍵查看元素,或者通過按F12審查元素,觸犯這兩個條件會自動并關閉頁面的相關資料,通過設置這個可以防止別人扒下自己的網頁,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09