js实现简易的英汉词典

本文实例为大家分享了js实现简易的英汉词典的具体代码,供大家参考,具体内容如下

一、目标

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

二、实现步骤

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

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

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

三、代码模块

1.html部分

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部分

 
    

4.js外链词汇字符串片段截图

js实现简易的英汉词典_第1张图片

四、效果图

js实现简易的英汉词典_第2张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(js实现简易的英汉词典)