js 实现一个简易的英语词典

清酒独酌

于 2021-11-22 14:58:30 发布

阅读量522

点赞数

分类专栏： javascript 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121471661

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

因为这里是使用的是本地的单词库，所以需要下载文件

下载地址：提取文件 - 单词库

<!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>