实现效果

dict.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>英汉字典</title><link rel="stylesheet" href="./lib/bootstrap.css" /><link rel="stylesheet" href="./css/dict.css" /><script src="./lib/jquery.js"></script>
</head><body style="padding: 15px;"><!-- 查询面板 --><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">词典</h3></div><form class="panel-body" id="formAddCmt"><input type="text" class="form-control inputword" name="username" autocomplete="off" placeholder="请输入英文词汇" /><button type="button" class="btn btn-primary" onclick="getWordExplain()">查询</button><!-- 相似显示 --><ul id="wordlist"></ul></form></div><!-- 查询结果 --><div class="panel panel-default" id="trans" style="display: none;"><div class="panel-heading"><h3 class="panel-title">解释</h3></div><div class="panel-body"><table class="table"><thead></thead><tbody id="translist"></tbody></table></div></div><script src="./js/query.js"></script></ul></body></html>

dict.css

* {margin: 0;padding: 0;
}.panel-primary {margin-bottom: 3rem;
}
.panel-title {text-align: center;
}
.inputword {float: left;width: 90%;
}
.btn {float: right;width: 8%;
}#wordlist {margin-top: 1.25rem;
}li {float: left;list-style: none;width: 100%;height: 2.5rem;border-bottom: 1px dashed rgba(111, 98, 98, 0.442);
}

query.js

$(function () {var clickwd = "";$(".btn").on("click", function () {clickwd = $('.inputword').val();})$('input').on('input', function () {if ($(this).val() != clickwd) {// location.reload();var tns = document.getElementById('trans');tns.style.display = "none";}})
})$(function () {$('input').on('input', function () {// console.log($(this).val());$.ajax({url: "http://43.136.217.18:8081/getSimilarWords",data: { "word": $(this).val() },type: "GET",datatype: "json",//访问成功，查看Statesuccess: function (data) {//解析JSONif (data.state == "SUC") {//成功后，读取相似词汇，渲染到图2的列表// console.log(data["content"])var rows = []$.each(data["content"], function (i, item) {var str = '<li style="color: #F0AD4E;">' + item + '</li>';rows.push(str)})$('#wordlist').empty().append(rows.join(''))}else {var rows = []$.each(data["content"], function (i, item) {var str = '<li style="color: #F0AD4E;">' + item + '</li>';rows.push(str)})$('#wordlist').empty().append(rows.join(''))//失败后，在图2的列表处显示失败信息}},//访问失败error: function (data) {console.log('系统错误消息')var str = '<li style="color: #ff0404;">系统错误消息</li>';$('#wordlist').empty().append(str)//在图2的列表处显示“系统错误消息”}})})
})function getWordExplain() {var wd = $('.inputword').val();$('#wordlist').empty();var tns = document.getElementById('trans');tns.style.display = "block";$.ajax({url: "http://43.136.217.18:8081/getWordDetail",data: { "word": wd },type: "GET",datatype: "json",//访问成功，查看Statesuccess: function (data) {//解析JSONif (data.state == "SUC") {//成功后，读取相似词汇，渲染到图3的内容区域console.log(data["content"]);var strhd = '<tr><th scope="col" style="font-size: 1.75rem; line-height: 2rem;">' + data["content"][0]["eng"] + '</th></tr>';$('thead').empty().append(strhd);var rows = []$.each(data["content"], function (i, item1) {$.each(item1["trans"], function (i, item2) {var trstr = '';$.each(item2["chn"], function (i, item3) {trstr = trstr + ' ' + item3;})console.log(trstr);var str = '<tr class="list-group-item"><td>' + item2["pos"][0] + '</td><td style="color: #dfbd7a89;">' + trstr + '</td></tr>';console.log(str);rows.push(str)})$('#translist').empty().append(rows.join(''))})}else {//失败后，在图3的内容区域处显示错误信息}},//访问失败error: function (data) {//在图3的内容区域处显示“系统错误消息”}});
}

前端实验六——英汉字典相关推荐

英汉字典程序C语言,电子英汉字典_c语言版.doc
PAGE PAGE 5 课程设计报告课题: 电子英汉字典学院: 电子工程与自动化专业: 测控技术与仪器学生姓名: XXX 学号: XXXXXXXXXXX 指导老师 : 陈寿宏 20 ...
[转]IOS5添加全局英汉字典教程，ibooks，safari内可用
http://bbs.weiphone.com/read-htm-tid-3926290.html 似乎ipad2区还没有一个关于如何增加英汉全局字典的教程,在其他区找了好久,终于弄好了,在此整理一下 ...
好程序员Java分享Java案例_英汉字典
在写代码的时候,当鼠标悬浮在某一个单词上面的时候,有道词典点有时会弹出一个消息气泡,在里面中给出关于这个单词相关的解释,下面给大家展示一个使用Java基础语言编写的英汉字典案例: 实现功能: ...
【原创】shadowebdict开发日记：基于linux的简明英汉字典（三）
全系列目录: [原创]shadowebdict开发日记:基于linux的简明英汉字典(一) [原创]shadowebdict开发日记:基于linux的简明英汉字典(二) [原创]shadowebdic ...
java 学习案例之英汉字典
在写代码的时候,当鼠标悬浮在某一个单词上面的时候,有道词典点有时会弹出一个消息气泡,在里面中给出关于这个单词相关的解释,下面给大家展示一个使用Java基础语言编写的英汉字典案例: 实现功能: 输入英文 ...
python有道字典_Python基于有道实现英汉字典功能
本文实例讲述了Python基于有道实现英汉字典功能的方法.分享给大家供大家参考.具体如下: import re,urllib aa="http://dict.youdao.com/searc ...
python制作英汉词典_Python基于有道实现英汉字典功能
本文实例讲述了Python基于有道实现英汉字典功能的方法.分享给大家供大家参考.具体如下: import re,urllib aa="http://dict.youdao.com/searc ...
英汉字典程序C语言,分享纯C语言英汉字典源码
近期深受开源的精神影响,并为之深深感动,想了很久,今天把我代码积累多年的一个"英汉字典"公布. 研一的时候因为无聊或者因为兴趣,做了一个纯C语言的英汉字典.核心算法是KMP快速查找 ...
英汉小字典java_java 学习案例之英汉字典
在写代码的时候,当鼠标悬浮在某一个单词上面的时候,有道词典点有时会弹出一个消息气泡,在里面中给出关于这个单词相关的解释,下面给大家展示一个使用Java基础语言编写的英汉字典案例: 实现功能: 输入英文 ...

前端实验六——英汉字典

dict.html

dict.css

query.js

前端实验六——英汉字典相关推荐

最新文章

热门文章