iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现简易的英汉词典
  • 324
分享到

js实现简易的英汉词典

2024-04-02 19:04:59 324人浏览 泡泡鱼
摘要

本文实例为大家分享了js实现简易的英汉词典的具体代码,供大家参考,具体内容如下 一、目标 利用js实现简易的英汉词典查询功能,达到单个词汇查找的效果 二、实现步骤 1.用一个js文件

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

一、目标

利用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: lightgreen
        }

3.js部分


 <script src='demo.js'></script>
    <script>
        // 将字符串通过换行进行字符串分割为数组
        let arr = word.split("\n");
 
        // 创建Map方法
        let map = new Map();
 
        // 遍历数组
        for (var i = 0; i < arr.length - 1; i += 2) {
            map.set(arr[i].substring(1), arr[i + 1].substring(6));
        }
 
        window.onload = function () {
            let oWord = document.getElementById("word");
            let oDesc = document.getElementById("desc");
 
            oWord.onkeyup = function () {
                let value = map.get(this.value);
                if (value) {
                    oDesc.innerHTML = value;
                } else {
                    oDesc.innerHTML = "查无此词";
                }
            }
        }
</script>

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

四、效果图

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

--结束END--

本文标题: js实现简易的英汉词典

本文链接: https://www.lsjlt.com/news/135293.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js实现简易的英汉词典
    本文实例为大家分享了js实现简易的英汉词典的具体代码,供大家参考,具体内容如下 一、目标 利用js实现简易的英汉词典查询功能,达到单个词汇查找的效果 二、实现步骤 1.用一个js文件...
    99+
    2024-04-02
  • C语言实现电子英汉词典系统
    本文实例为大家分享了C语言实现电子英汉词典系统的具体代码,供大家参考,具体内容如下 一、设计功能(文章仅供参考) a. 词条录入:即添加单词记录。 b. 信息显示:将所有的...
    99+
    2024-04-02
  • 怎么用php+mysql实现英汉查询词典的功能
    本篇内容主要讲解“怎么用php+mysql实现英汉查询词典的功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用php+mysql实现英汉查询词典的功能”吧...
    99+
    2024-04-02
  • Ubuntu安装英汉词典的详细步骤
    本篇内容介绍了“Ubuntu安装英汉词典的详细步骤”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Ubuntu安装英汉词典 linux并不缺少...
    99+
    2023-06-13
  • Java实现中英文词典功能
    本文实例为大家分享了Java实现中英文词典功能的具体代码,供大家参考,具体内容如下 功能如下: 1、可以向词典中增加中英文单词,并提供修改和删除功能 2、完成输入中文查询英文的功能,...
    99+
    2024-04-02
  • Java实现简易的分词器功能
    业务需求: 生活中常见的搜索功能大概可分为以下几类: 单关键词。如“Notebook” 双关键词加空格。如“Super Notebook” 多关键词加多空格...
    99+
    2024-04-02
  • js实现简易弹幕系统
    本文实例为大家分享了原生js实现弹幕效果的具体代码,供大家参考,具体内容如下 实现思路 1、先写好静态页面框架 <div id='father'> &...
    99+
    2024-04-02
  • js实现一个简易的计算器
    利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <...
    99+
    2024-04-02
  • JS怎么实现简易计算器
    这篇文章主要介绍了JS怎么实现简易计算器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS怎么实现简易计算器文章都会有所收获,下面我们一起来看看吧。 一、题目描述 用户在弹...
    99+
    2024-04-02
  • 使用JS实现简易计算器
    使用JS完成简易计算器,供大家参考,具体内容如下 要求:输入的值只能是数字,使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...
    99+
    2024-04-02
  • 原生js实现简易计算器
    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<)。其实,感觉...
    99+
    2024-04-02
  • js实现简易购物车功能
    本文实例为大家分享了js实现简易购物车功能的具体代码,供大家参考,具体内容如下 一.整体效果图 (关灯下)  (开灯下) 二.HTML代码 <!DOCTYPE...
    99+
    2024-04-02
  • js实现简易计数器功能
    本文实例为大家分享了js实现简易计数器功能的具体代码,供大家参考,具体内容如下 实现简易计数器 可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html&...
    99+
    2022-11-13
    js 计数器
  • Python利用re模块实现简易分词(tokenization)
    目录一个简单的tokenizer过滤tokens流注意子串匹配陷阱一个简单的tokenizer 分词(tokenization)任务是Python字符串处理中最为常见任务了。我们这里...
    99+
    2024-04-02
  • 原生js实现简易抽奖系统
    本文实例为大家分享了js实现简易抽奖系统的具体代码,供大家参考,具体内容如下 效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 ...
    99+
    2024-04-02
  • 如何通过Canvas+JS实现简易的时钟
    今天就跟大家聊聊有关如何通过Canvas+JS实现简易的时钟,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟...
    99+
    2023-06-17
  • Python怎么利用re模块实现简易分词
    本文小编为大家详细介绍“Python怎么利用re模块实现简易分词”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python怎么利用re模块实现简易分词”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一个简单的to...
    99+
    2023-06-30
  • 利用JS实现加减简易计算器
    目录前言实现思路前言 这个题目前一周左右在小红书刷到,想着就去就做一下,第一版因为思路不清晰,没有完整的实现功能。后来忙着改论文,就一直拖到现在。想着回去在看看这篇,发现已经找不到...
    99+
    2024-04-02
  • js实现移动端简易滑动表格
    本文实例为大家分享了js实现移动端简易滑动表格的具体代码,供大家参考,具体内容如下 上js文件代码 <template>   <view>     <s...
    99+
    2024-04-02
  • 原生js怎么实现简易抽奖系统
    这篇文章主要讲解了“原生js怎么实现简易抽奖系统”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“原生js怎么实现简易抽奖系统”吧!效果图原理:其实这里的原理就是通过按钮的状态是开始抽奖还是停止...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作