js實(shí)現(xiàn)簡易的英漢詞典
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡易的英漢詞典的具體代碼,供大家參考,具體內(nèi)容如下
一、目標(biāo)
利用js實(shí)現(xiàn)簡易的英漢詞典查詢功能,達(dá)到單個(gè)詞匯查找的效果
二、實(shí)現(xiàn)步驟
1.用一個(gè)js文件保存所有英漢詞典的詞匯為字符串樣式
2.在另一個(gè)js文件或者h(yuǎn)tml頁面的script里將裝有詞匯的文件的字符串分隔成數(shù)組,添加Map方法,并進(jìn)行遍歷
3.將搜索框的內(nèi)容與數(shù)組元素匹配返回結(jié)果
三、代碼模塊
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> // 將字符串通過換行進(jìn)行字符串分割為數(shù)組 let arr = word.split("\n"); // 創(chuàng)建Map方法 let map = new Map(); // 遍歷數(shù)組 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外鏈詞匯字符串片段截圖
四、效果圖
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js和html5實(shí)現(xiàn)手機(jī)端刮刮卡抽獎(jiǎng)效果完美兼容android/IOS
- js輪盤抽獎(jiǎng)實(shí)例分析
- js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
- js簡單抽獎(jiǎng)代碼
- js實(shí)現(xiàn)簡單隨機(jī)抽獎(jiǎng)的方法
- js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲?qū)嵗?/a>
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)效果
- javascript 隨機(jī)抽獎(jiǎng)程序代碼
- JS模擬抽獎(jiǎng)序效果實(shí)現(xiàn)代碼
相關(guān)文章
如何確保JavaScript的執(zhí)行順序 之實(shí)戰(zhàn)篇
我曾在文章《如何在多個(gè)頁面使用同一個(gè)HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript(部分瀏覽器),但考慮到JavaScript的依賴關(guān)系,他們的執(zhí)行依然是按照引入順序進(jìn)行的。2011-03-03JS實(shí)現(xiàn)動(dòng)態(tài)無縫輪播
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)無縫輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01基于JavaScript實(shí)現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置(X省X市X縣X街道X號(hào))
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置(X省X市X縣X街道X號(hào))的相關(guān)資料,需要的朋友可以參考下2015-12-12

js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁

Javascript中定義方法的另類寫法(批量定義js對(duì)象的方法)

JS禁止瀏覽器右鍵查看元素或按F12審查元素自動(dòng)關(guān)閉頁面示例代碼

Bootstrap中datetimepicker使用小結(jié)