实验6代码
<!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>
</head>
<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>
<style>
* {
margin: 0rem;
padding: 0rem;
}
.top {
position: fixed;
}
#wordArea input {
float: left;
width: 7.5rem;
height: 1rem;
padding: .03rem .05rem .03rem .2rem;
border: .5px solid #000000;
font-size: .5rem;
}
#searchArea input {
position: absolute;
right: -3.02rem;
top: 0rem;
width: 2.75rem;
height: 1.09rem;
font-size: .5rem;
}
#resultArea {
float: left;
margin-top: 1.4rem;
width: 10.76rem;
height: 6.16rem;
border: 1px solid #000000;
}
li {
list-style: none;
}
.lines {
margin-top: .5rem;
}
.engword {
margin-left: 1rem;
float: left;
font-size: .5rem;
}
.meaning {
margin-left: 5rem;
font-size: .5rem;
}
</style>
<script src=”js/jquery-3.1.1.min.js”></script>
<script>
$().ready(function () {
$(“#wordArea input”).bind(‘input’, function () {
var wordclip = $(this).val();
$.ajax({
url: “http://43.136.217.18:8081/getSimilarWords”,
data: { word: wordclip, max: 30 },
type: “GET”,
datatype: “JSON”,
success: function (data) {
if (data.state == “SUC”) {
var htmlcode = “<ul>”;
for (var i in data.content) {
htmlcode += “<li>” + data.content[i] + “</li>”;
}
htmlcode += “</ul>”;
$(“#resultArea”).html(htmlcode);
$(“#searchArea input”).on(‘click’, function () {
var wordtext = $(“#wordArea input”).val();
// alert(wordtext);
$(“#wordArea input”).val(wordtext);
$.ajax({
url: “http://43.136.217.18:8081/getWordDetail”,
data: { word: wordtext },
type: “GET”,
datatype: “JSON”,
success: function (data) {
if (data.state == “SUC”) {
var htmlcode2 = “<ul>”;
for (var j in data.content) {
// var engwordname = data.content[j].eng;
htmlcode2 += “<li class=’lines’>”;
htmlcode2 += “<div class=’engword’>” + data.content[j].eng + “</div>”;
var temp = ”;
for (var i in data.content[j].trans) {
temp += data.content[j].trans[i].pos + data.content[j].trans[i].chn;
temp += ‘ ’;
// htmlcode2 += “<span class=’meaning’>” + data.content[j].trans[i].pos + data.content[j].trans[i].chn + “</span>”;
// htmlcode2 += “<li>” + data.content[j].trans[i].chn + “</li>”;
}
htmlcode2 += “<div class=’meaning’>” + temp + “</div>”;
htmlcode2 += “</li>”;
}
htmlcode2 += “</ul>”;
$(“#resultArea”).html(htmlcode2);
}
else {
alert(“查询不到该单词，是否输入有问题呢？”);
}
},
error: function () {
alert(“访问出错了！”);
}
});
});
$(“#resultArea li”).on(‘click’, function () {
var word2 = $(this).text();
// alert(word2);
$(“#wordArea input”).val(word2);
$.ajax({
url: “http://43.136.217.18:8081/getWordDetail”,
data: { word: word2 },
type: “GET”,
datatype: “JSON”,
success: function (data) {
if (data.state == “SUC”) {
var htmlcode2 = “<ul>”;
for (var j in data.content) {
// var engwordname = data.content[j].eng;
htmlcode2 += “<li class=’lines’>”;
htmlcode2 += “<div class=’engword’>” + data.content[j].eng + “</div>”;
var temp = ”;
for (var i in data.content[j].trans) {
temp += data.content[j].trans[i].pos + data.content[j].trans[i].chn;
temp += ‘ ’;
// htmlcode2 += “<span class=’meaning’>” + data.content[j].trans[i].pos + data.content[j].trans[i].chn + “</span>”;
// htmlcode2 += “<li>” + data.content[j].trans[i].chn + “</li>”;
}
htmlcode2 += “<div class=’meaning’>” + temp + “</div>”;
htmlcode2 += “</li>”;
}
htmlcode2 += “</ul>”;
$(“#resultArea”).html(htmlcode2);
}
else {
alert(“数据加载失败”);
}
},
error: function () {
alert(“访问出错了！”);
}
});
});
}
else {
alert(“数据加载失败”);
}
},
error: function () {
alert(“访问出错了！”);
}
});
});
});
</script>
<body>
<div class=”top”>
<div id=”wordArea”><input type=”text” placeholder=”请输入英文词汇”></div>
<div id=”searchArea”><input type=”button” value=”查词”></div>
</div>
<div id=”resultArea”></div>
</body>
</html>
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/163177.html
