时间:4个小时左右
代码:290行左右
博客:1
学习内容：完成了顶会热词的爬取与展示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>论文查询</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="js/bootstrap.min.js" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css" media="screen" type="text/css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
input[type=text] {
100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
input[type=button], input[type=reset] {
background-color: pink;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#feny input[type=button] {
background-color: #DDDDDD;
border: none;
color: black;
padding: 16px 16px;
text-decoration: none;
margin: 4px 4px;
cursor: pointer;
20px;
height: 20px;
}
td{300px;overflow:hidden}
button{
color: pink;
}
</style>
<body>
<h1 align="center" style="font-family: 微软雅黑;font-size:25px;">论文查询</h1>
<form action="servlet?method=findlunwen" method="post" id="biaodan">
<div align="center" id="firdiv">
<table align="center">
<tr>
<td>请输入摘要：</td>
<td><input type="text" id="as" name="as" placeholder="请输入摘要"></td>
</tr>
<tr>
<td>请输入关键词：</td>
<td> <input type="text" id="title" name="title" placeholder="请输入关键词"></td>
</tr>
<tr>
<td>请输入作者:</td>
<td><input type="text" id="zuozhe" name="zuozhe" placeholder="请输入作者"></td>
</tr>
<tr>
<td><input type="button" value="查询" onclick="sendAjax()" class="findbtn">
<input type="button" onclick="x()" value="词云图"></td>
</tr>
</table>
<script>
function x() {
window.open('view.jsp');
}
</script>
<div align="center" id="reslunwendiv" class="subbox" style="margin-top: 50px">
<table id="restable">
</table>
</div>
</div>
</form>
</body>
<script type="text/javascript">
var findnummm = 0;
var resnum = 0;
var alldata;
function sendAjax() {
var url = "servlet?method=findlunwen&randnum=" + Math.random();
$.ajax({
type: "get",
url: url,
data: $('#biaodan').serialize(),
dataType: "json",
success: function (result) {
//alert("success--result:"+result[0].title);
alldata = result;
reslist(result);
if (findnummm == 0) {
addresfinddiv();
findnummm = 1;
} else changeresnum();
},
error: function () {
alert("error");
}
});
}
function reslist(data) {
var tab = document.getElementById("restable");
var str = "<tr>" +
"<td width='35%' style='background: pink;font-family:微软雅黑;'>标题</td>" +
"<td width='35%' style='background: pink;font-family:微软雅黑;'>作者</td>" +
"<td width='15%' style='background: pink;font-family:微软雅黑;'>时间</td>" +
"<td width='15%' style='background: pink;font-family:微软雅黑;'>链接</td>" +
"</tr>";
for (i in data) {
str = str + "<tr><td>" + data[i].title + "</td><td>" + data[i].zuozhe + "</td><td>" + data[i].time + "</td><td><a target='_blank' href='" + data[i].link + "'>" + "文章链接" + "</a></td></tr>";
resnum = resnum + 1;
}
tab.innerHTML = str;
}
function addresfinddiv() {
var formdiv = document.getElementById("tjdiv");
var str = "<h2 align='center' id='totalnumh'>一共" + resnum + "条</h2>"
var div = document.createElement("div");
div.id = "changeresdiv";
div.innerHTML = str;
formdiv.appendChild(div);
resnum = 0;
}
</script>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>可视化图</title> <script src="js/jquery.min.js"></script> <script src="js/echart3.js"></script> <script src="js/echarts-wordcloud.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> <style> #main{ 100%; height: 1500px; } table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border- 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th { border- 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } table.gridtable td { border- 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } input[type=button], input[type=reset] { background-color: pink; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } td{200px;overflow:hidden} </style> </head> <body> <form actoin="" id="shuzi2"method="post"> <div align="center"> <h3 style="margin-top: 50px">输入热词的数量： <input type="text" name="shuzi" id="shuzi" style="margin-top: 50px;height: 30px;"> <input type="button" onclick="cloud()" onclick="addBut()" value="确定" style="margin-top: 30px"></h3> </div> </form> <div class="layui-row"> <div class="layui-col-xs6"> <div class="grid-demo grid-demo-bg1"> <div id="main" align="center" style="align-items: center;100%;height:300%;"></div> </div> </div> <div class="layui-col-xs6"> <div class="grid-demo"> <table id="biaoge" style="border-collapse: collapse; border-spacing: 0; 600px; height: 600px; margin-left: 100px;"> </table> </div> </div> </div> <div> <script type="text/javascript"> var str="<table border='1'>" + "<tbody>" + "<tr>" + "<td width='35%'>热词</td> " + "<td width='15%'>数量</td>" + "</tr>" + "<br>"; var str1="</tbody>" + "</table>"; var tab=document.getElementById("biaoge"); function addTable(){ var num=0; var tableHtml=""; tableHtml +='' + '' } function cloud(){ var dt; var hzb=new Array(0); var zzb=new Array(0); $.ajax({ url : "servlet?method=reci", async : true, type : "POST", data :$('#shuzi2').serialize(), dataType : "json", success : function(data) { dt = data; var mydata = new Array(0); for (var i = 0; i < dt.length; i++) { var d = {}; d["name"] = dt[i].name; d["value"] = dt[i].value; mydata.push(d); hzb.push(dt[i].name); zzb.push(dt[i].value); if (dt[i]!=null) { str = str + "<tr><td>" + dt[i].name + "</td> " + "<td>" + dt[i].value + "</td></tr><br>"; } } if(i==dt.length){ str=str+str1; } console.log(str); tab.innerHTML = str; str="<table border='1'>" + "<tbody>" + "<tr>" + "<td width='35%'>热词</td> " + "<td width='15%'>数量</td>" + "</tr>" + "<br>"; var myChart = echarts3.init(document.getElementById('main')); //设置点击效果 myChart.setOption({ title: { text: '' }, tooltip: {}, series: [{ type : 'wordCloud', //类型为字符云 shape:'smooth', //平滑 gridSize : 8, //网格尺寸 size : ['50%','50%'], //sizeRange : [ 50, 100 ], rotationRange : [-45, 0, 45, 90,60,16], //旋转范围 textStyle : { normal : { fontFamily:'微软雅黑', color: function() { return 'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')' } }, emphasis : { shadowBlur : 5, //阴影距离 shadowColor : '#333' //阴影颜色 } }, left: 'center', top: 'center', right: 'center', bottom: 'center', '100%', height:'100%', data:mydata }] }); }, error : function() { alert("请求失败"); }, }); } function recitable(){ var bigdiv=document.getElementById("FontScroll"); var str="<table align='center'>"; var j=0; for(i=0;i<alldata.length;i++){ if(j==0)str=str+"<tr>"; str=str+"<td class='iconfont' id='tabtr"+i+"'>"+(parseInt(i)+parseInt(1))+"."+alldata[i].name+"</td>"; j++; if(j==3){str=str+"</tr>";j=0} } str=str+"</table>"; var div=document.createElement("div"); div.id="tablediv"; div.innerHTML = str; bigdiv.appendChild(div); } function cleartable(){ document.getElementById("tablediv").remove(); } </script> </body> </html>