js實(shí)現(xiàn)簡(jiǎn)易的英漢詞典
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)易的英漢詞典的具體代碼,供大家參考,具體內(nèi)容如下
一、目標(biāo)
利用js實(shí)現(xiàn)簡(jiǎn)易的英漢詞典查詢功能,達(dá)到單個(gè)詞匯查找的效果
二、實(shí)現(xiàn)步驟
1.用一個(gè)js文件保存所有英漢詞典的詞匯為字符串樣式
2.在另一個(gè)js文件或者h(yuǎn)tml頁(yè)面的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>
// 將字符串通過(guò)換行進(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 = "查無(wú)此詞";
}
}
}
</script>
4.js外鏈詞匯字符串片段截圖

四、效果圖

以上就是本文的全部?jī)?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ǎn)單抽獎(jiǎng)代碼
- js實(shí)現(xiàn)簡(jiǎ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è)頁(yè)面使用同一個(gè)HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript(部分瀏覽器),但考慮到JavaScript的依賴關(guān)系,他們的執(zhí)行依然是按照引入順序進(jìn)行的。2011-03-03
JS實(shí)現(xiàn)動(dòng)態(tài)無(wú)縫輪播
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)無(wú)縫輪播,文中示例代碼介紹的非常詳細(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)分頁(yè)
Javascript中定義方法的另類寫法(批量定義js對(duì)象的方法)
JS禁止瀏覽器右鍵查看元素或按F12審查元素自動(dòng)關(guān)閉頁(yè)面示例代碼
Bootstrap中datetimepicker使用小結(jié)
JS設(shè)計(jì)模式之訪問(wèn)者模式定義與用法分析

