因为这里是使用的是本地的单词库，所以需要下载文件
下载地址：提取文件 - 单词库
<!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>