标签:map arr word js 简易 let 英语词典 200px desc
因为这里是使用的是本地的单词库,所以需要下载文件
下载地址:提取文件 - 单词库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#dict {
width: 200px;
height: 200px;
padding: 50px;
margin: 100px auto;
background-color: aqua;
border-radius: 20px;
}
#word {
width: 200px;
height: 30px;
font-size: 18px;
}
#desc {
width: 200px;
height: 150px;
margin-top: 20px;
background-color: #7db1b4;
}
</style>
</head>
<body>
<div id="dict">
<input type="text" id="word" placeholder="请输入单词">
<div id="desc"></div>
</div>
<!-- 引入单词 -->
<script src="./dict.js"></script>
<script>
/* 分割字符串 */
let arr = word.split('\n')
/* 创建一个map */
let map = new Map();
/* 两两分成一组 */
for (i = 0; i < arr.length - 1; i += 2) {
/* //获取 单词 不留前一个# */
let word = arr[i].substring(1);
/* //获取 解释 不留前6个# */
let desc = arr[i + 1].substring(6);
/* 添加到map中去 */
map.set(word, desc)
}
/* 获取输入框 */
const inp = document.getElementById('word')
const desc = document.getElementById('desc')
/* 添加表单事件 */
inp.oninput = () => {
/* 获取输入框的值,根据值在map上查找 */
let value = map.get(inp.value.trim())
if (value) {
desc.innerHTML = value;
} else {
desc.innerHTML = "查无此词";
}
}
</script>
</body>
</html>
标签:map,arr,word,js,简易,let,英语词典,200px,desc 来源: https://blog.csdn.net/yang68668/article/details/121471661
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。