制作简易的英汉词典

最新推荐文章于 2023-11-24 09:29:10 发布

乐乐乐乐宝

最新推荐文章于 2023-11-24 09:29:10 发布

阅读量2.2k

点赞数 2

分类专栏： js案列文章标签： html5 html javascript css

本文链接：https://blog.csdn.net/xiaonaoxinya/article/details/120191725

版权

本文介绍了如何利用JavaScript实现一个简单的英汉词典查询功能。通过将词典词汇存储为字符串，然后在HTML页面中将其分割成数组并使用Map方法进行遍历，实现了用户在搜索框输入词汇后匹配并返回结果的功能。文章分为HTML、CSS和JavaScript三个代码模块进行讲解，并附有最终效果的截图。

摘要由CSDN通过智能技术生成

一、目标

利用js实现简易的英汉词典查询功能，达到单个词汇查找的效果

二、实现步骤

1.用一个js文件保存所有英汉词典的词汇为字符串样式

2.在另一个js文件或者html页面的script里将装有词汇的文件的字符串分隔成数组，添加Map方法，并进行遍历

3.将搜索框的内容与数组元素匹配返回结果

三、代码模块

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: li