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)容,希望對大家的學(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深拷貝和淺拷貝概念與用法實(shí)例分析
這篇文章主要介紹了JavaScript深拷貝和淺拷貝概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript深拷貝與淺拷貝的概念、原理、用法及相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼
這篇文章主要介紹了JS實(shí)現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
webpack中Loader和Plugin的區(qū)別小結(jié)
本文主要介紹了webpack中Loader和Plugin的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
jszip插件實(shí)現(xiàn)圖片打包下載的方法分析
這篇文章主要介紹了jszip插件實(shí)現(xiàn)圖片打包下載的方法,結(jié)合實(shí)例形式分析了JavaScript使用jszip插件依據(jù)圖片列表打包下載zip壓縮文件的相關(guān)操作技巧,需要的朋友可以參考下2023-05-05
javascript設(shè)計(jì)模式 – 簡單工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 簡單工廠模式,結(jié)合實(shí)例形式分析了javascript簡單工廠模式基本概念、原理、定義、應(yīng)用場景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
簡易版本JSON.stringify的實(shí)現(xiàn)及其六大特性詳解
最近做項(xiàng)目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實(shí)現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10

