<!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>词典</title>
<style>
*{
margin: 0;
padding: 0;;
}
#header{
width: 960px;
height: 165px;
margin: auto;
margin-top: 100px;
/* background: #000; */
}
img{
width: 242px;
height: 48px;
margin-left: 359px;
}
#wordArea{
width: 640px;
height: 78px;
background: #fff;
border: 3px solid black;
border-radius: 18px;
margin-top: 36px;
margin-left: 160px;
}
.searchcont{
display: inline-block;
margin-left: 103px;
margin-top: 14px;
height: 50px;
width: 433px;
}
.searchcont input{
width: 100%;
height: 50px;
border: none;
font-size: 24px;
outline: 0;
}
#searchArea{
display: block;
width: 60px;
height: 50px;
float: right;
margin-right: 20px;
margin-top: 14px;
}
#searchArea #input{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 10px;
/* background: white; */
/* background-image: url(./search.png); */
}
#searchArea #input img{
height: 30px;
width: 30px;
margin: 0;
vertical-align: middle;
}
#contentArea{
display: none;
width: 640px;
margin-left: 160px;
border: 3px solid black;
border-top: 0px;
border-radius: 18px;
}
ul{
list-style: none;
margin-left: 150px;
font-size: 20px;
}
ul li{
padding-top: 10px;
padding-bottom: 10px;
}
li:hover{
cursor: pointer;
background: gainsboro;
}
#contentArea div{
display: none;
height: 10px;
width: 20px;
background: #000;
float: left;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<script>
$().ready(function(){
//注册文本框事件
$("#searchArea #input").click(function(){
searchWord($("#wordArea input").val());
});
$("#wordArea input").on("input",function(){
// console.log($(this).val());
if($(this).val()==""){
$("#contentArea").hide();
}
else{
$("#contentArea").show();
}
$.ajax({
url:"http://43.136.217.18:8081/getSimilarWords",
data:{word:$(this).val()},
type:"GET",
dataType:"json",
success:function(jdata){
if(jdata.state=="SUC"){
var html="<ul>";
for(var i in jdata.content){
html+="<li>"+jdata.content[i]+"</li>";
}
html+="</ul>";
$("#contentArea").html(html);
$("#contentArea li").on("click",function(){
$("#wordArea input").val($(this).text());
//查词
searchWord($("#wordArea input").val());
});
}
},
error:function(){
//打印失败消息
}
});
});
});
function searchWord(Word)
{
$.ajax({
url:"http://43.136.217.18:8081/getWordDetail",
data:{word:Word},
type:"GET",
dataType:"json",
success:function(Data){
if(Data.state=="SUC"){
$("#contentArea").html("");
// console.log(Data.content[0].eng);原词
// console.log(Data.content[0].trans);//翻译列表
// console.log(Data.content[0].trans[0].chn);
// console.log(Data);
var eng="<div>"+Data.content[0].eng+"</div>";
// console.log(eng);
var cont="<ul>"+"<li>"+Data.content[0].eng+"</li>";
for(var j in Data.content){
for(var i in Data.content[j].trans)
{
cont+="<li>"+Data.content[j].trans[i].pos+Data.content[j].trans[i].chn+"</li>";
}
cont+="<hr>";
}
cont+="</ul>";
$("#contentArea").html(cont);
}
else{
}
},
error:function(Data){
}
});
}
</script>
</head>
<body>
<div id="header">
<img src="title.png" alt="">
<div id="wordArea"><div class="searchcont"><input type="text" placeholder="请输入词汇"></div>
<div id="searchArea"><button id="input"><img src="./search.png" alt=""></button></div>
</div>
<div id="contentArea">
</div>
</div>
</body>
</html>
6shiyan
最新推荐文章于 2024-08-21 14:09:37 发布