6shiyan

最新推荐文章于 2024-08-21 14:09:37 发布
deersum
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量44
点赞数
文章标签：前端
本文链接：https://blog.csdn.net/deersum/article/details/132669474
版权
<!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>