个人作业2-热词顶会
首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <link rel="stylesheet" href="login.css"> </head> <body> <table align="center"> <tr> <td><a href="search.php"><button>查找论文</button></a></td> </tr> <tr> <td><a href="index.jsp"><button>顶会热词</button></a></td> </tr> </table> </body> </html>
查找页面
<?php $conn=mysqli_connect("localhost","root","123456","article") or die("数据库连接失败"); mysqli_query($conn,'set names utf8'); //$name = addslashes($_POST['name']); //$author = addslashes($_POST['author']); //$year = addslashes($_POST['year']); $one = addslashes($_POST['one']); $two = addslashes($_POST['two']); $tj1="1=1"; $tj2="1=1"; $tj3="1=1"; if(!empty($_POST)){ if($_POST["name"] != ""){ $name = $_POST["name"]; $tj1 = " title like '%{$name}%'"; } if($_POST["author"] != ""){ $tj2 = " author like '%{$_POST['author']}%'"; } } $tj = " where ".$tj1; $sql="select * from cvpr ".$tj." and ".$tj2; $result=mysqli_query($conn,$sql)or die("数据查询失败"); echo "<table width='100%' border='1'>"; echo "<tr style='width:100%;'><td>题目</td><td width='400px' style='word-wrap:break-word;'>描述</td><td>作者</td><td>html路径</td><td>查看论文的pdf</td></tr>"; $f=0; $n=1; $c=0; while($row=mysqli_fetch_array($result)) { echo "<tr>"; foreach($row as $k=>$v) { if(!is_numeric($k)){ echo "<td width='500px' style='word-wrap:break-word;'>$v</td>"; if($k=='pdf'){ $place=$v; } } } echo"<td><a href='$place'>查看论文</a></td>"; echo "</tr>"; } echo "</table>"; //插入数据库 mysqli_close($conn); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="login.css"> </head> <body> <table align="center"> </table> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="login.css">
<script type="text/javascript">
function show()
{
var value = document.getElementById("div1").style.display;
if(value=="none")
{
document.getElementById("div1").style.display="block";
}
else
document.getElementById("div1").style.display="none";
}
function show1()
{
var value = document.getElementById("div2").style.display;
if(value=="none")
{
document.getElementById("div2").style.display="block";
}
else
document.getElementById("div2").style.display="none";
}
</script>
<style>
div{
text-align:center;
}
</style>
</head>
<body>
<table align="center">
<form method="POST" action="find.php">
<div>
<p>标题:<input type="text" name="name">
<input type="button" value="添加条件" onClick="show()"/>
</p>
</div>
<div id="div1" style="display:none">
<p>
<select name="one">
<option value="and">and</option>
<option value="or">or</option>
<option value="not">not</option>
</select>
作者:<input type="text" name="author">
<input type="button" value="添加条件" onClick="show1()"/>
</p>
</div>
<div id="div2" style="display:none">
<p>
<select name="two">
<option value="and">and</option>
<option value="or">or</option>
<option value="not">not</option>
</select>
描述:<select name="ab">
<input type="text" name="ab">
</select></p>
</div>
<tr>
<td></td>
<td><input type="submit" value="查找" ></td>
<td><input type="reset" value="重置"></td>
</tr>
</form>
</table>
</body>
</html>
热词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="login.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-wordcloud.js"></script>
<style>
.column1{
text-align:center;
}
</style>
</head>
<body>
<div class="column1" style="width: 100%;height: 10%;" >
<p>输入词云图的个数：<input type="text" id="count" ><input type="button" value="显示" onclick="click1(mydata)" ></p>
</div>
<div style="width: 100%; height: 400px">
<table border="1" align="left">
<THEAD align="center"><TR><TH>单词</TH><TH>词频</TH></TR></THEAD>
<TBODY id='main'></TBODY>
</table>
<div id="main1" style="width:100%; height: 400px" align="center"></div>
<script type="text/javascript">
var b = new Array();
var n = new Array();
var c = new Array();
var mydata = new Array();
window.onload = function () {
var url = "sheet1.json";
var request = new XMLHttpRequest();
request.open("get",url);
request.send(null);
request.onload = function(){
if (request.status == 200){
var json = JSON.parse(request.responseText)
for (var i = 0;i<json.length;i++) {
var d = {};
d['name'] = json[i].name;
d['value'] = json[i].count;
mydata.push(d);
}
console.log(mydata)
}
}
}
function compare(property,desc) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
if(desc==true){
// 升序排列
return value1 - value2;
}else{
// 降序排列
return value2 - value1;
}
}
}
function click1() {
//数据排序
var name = document.getElementById("count");
var num = name.value;
mydata.sort(compare('value',false));
//截取
b = mydata.slice(0,num);//
for(i=0;i<b.length;i++){
n.push(b[i].name);
c.push(b[i].value);
}
var chart = echarts.init(document.getElementById('main1'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data:b
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
//}
var div1 = document.getElementById('main');
var code = "";
for(a=0;a<b.length;a++){
code += "<TR><TD>"+b[a].name+"</TD><TD>"+b[a].value+"</TD></TR>";
}
//code += "<TR><TD>Learning</TD><TD>123</TD></TR>";
//code += "<TR><TD>Image</TD><TD>61</TD></TR>";
//code += "<TR><TD>Network</TD><TD>57</TD></TR>";
//code += "<TR><TD>Deep</TD><TD>57</TD></TR>";
div1.innerHTML = code;
// 初始化echarts实列对象
/*var myChart = echarts.init(document.getElementById("main"));
// 指定配置项和数据(option)
var option = {
legend: {
top: "0%",
right:"0%",
textStyle: {
color: "#2f89cf",
fontSize: "12",
},
},
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
// 修改图标的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true,
},
xAxis: [{
type: "category",
data: n,
axisTick: {
alignWithLabel: true,
},
// 修改刻度标签相关样式
axisLabel: {
color: "rgba(12, 25, 255, .6)",
fontSize: "12",
interval: 1, //控制是否全部显示
},
// 不显示x轴的样式
}, ],
yAxis: [{
type: "value",
// 修改刻度标签相关样式
axisLabel: {
color: "rgba(255, 255, 255, .6)",
fontSize: "12",
},
// y轴坐标系
axisLine: {
lineStyle: {
color: "rgba(255, 255, 255, .1)",
width: 2,
},
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, .1)",
},
},
}, ],
series: [
{
name: "词频",
type: "bar",
color:"orange",
// 修改柱子的宽度
barWidth: "10%",
data: c,
itemStyle: {
// 修改柱子的圆角
barBorderRadius: 5,
},
},
],
};
// 把配置项给实列对象
myChart.setOption(option);
// 让图表跟随屏幕自动的去适应
window.onresize = chart.resize;
window.addEventListener("resize", function() {
myChart.resize();
});
*/
}
</script>
</div>
</body>
</html>
浙公网安备 33010602011771号