<!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>Document</title>
<script type="text/javascript">
function setRootFontSize(){
var rootHtml = document.documentElement;
var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
rootHtml.style.fontSize = rem + "px";
}
setRootFontSize(); //网页首次载入时执行一次
window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行
window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行
</script>
<link rel="stylesheet" href="./01.css">
<script src="../jquery.js/jquery-3.1.1.min.js"></script>
<script>
$().ready(function(){
$("#searchArea input").click(function(){
var word = $("#wordArea input").val();
searchWord(word);
});
// 文本框改变事件
$("#wordArea input").on("input" , function(){
$.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());
var word = $("#wordArea input").val();
searchWord(word);
});
}else{
}
},
error : function(){
}
});
});
});
function searchWord(word){
$.ajax({
url : "http://43.136.217.18:8081/getWordDetail",
data : {word: $("#wordArea input").val()},
type : "GET",
dataType : "json",
success : function(jdata){
if(jdata.state == "SUC"){
var html1 = "<ul>";
for(var i in jdata.content){
html1 += "<li>" ;
if(i == 0)
html1 += jdata.content[i].eng + " ";
else
html1 += " ";
for(var j in jdata.content[i].trans){
html1 += jdata.content[i].trans[j].pos + jdata.content[i].trans[j].chn;
html1 += "<br>";
html1 += " ";
}
html1 += "</li>";
}
html1 += "</ul>";
$("#contentArea").html(html1);
}else{
}
},
error : function(jdata){
}
});
};
</script>
</head>
<body>
<div id="header">
<div id="searchArea"><input type="button" value="查词"></div>
<div id="wordArea"><input type="text" placeholder="请输入中文词汇"></div>
</div>
<div id="contentArea"></div>
</body>
</html>
#header {
position: fixed;
top : 0;
}
#header input{
width: 100%;
}
#wordArea {
float: right;
width: 6rem;
padding-right: 1rem;
}
#searchArea {
float: right;
width: 2rem;
}
#contentArea{
padding-top: 2rem;
font-size: 0.5rem;
}
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
