📄 index.jsp
字号:
<%@ page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>计算机类图书销售统计图</title>
<script type='text/javascript' src='/webchart/dwr/interface/DataExchange.js'></script>
<script type='text/javascript' src='/webchart/dwr/engine.js'></script>
<script type='text/javascript' src='/webchart/dwr/util.js'></script>
<script type="text/javascript">
var updateClicked=0;
//获得数据
function getData(month) {
DWRUtil.useLoadingMessage("正在加载数据...");
DataExchange.getData(month,getDataCallback);
}
function getDataCallback(data) {
var month=data[0];
//初始化每本书的销售量
document.getElementById("javaText").value=data[1];
document.getElementById("netText").value=data[2];
document.getElementById("cText").value=data[3];
document.getElementById("pbText").value=data[4];
document.getElementById("pascalText").value=data[5];
//初始化图片
var checkedRadio;
if (document.getElementsByName("radio")[0].checked) {
checkedRadio="line"
} else if (document.getElementsByName("radio")[1].checked) {
checkedRadio="rect"
} else if (document.getElementsByName("radio")[2].checked) {
checkedRadio="pie"
}
document.getElementById("image").src="image.jsp?month="+month+"&image="+checkedRadio+"&update="+updateClicked;
}
//控制显示图片
function radioclicked() {
var month=document.getElementById("monthOption").value;
if (event.srcElement.value=="line") {
document.getElementById("image").src="image.jsp?month="+month+"&image=line&update="+updateClicked;
} else if (event.srcElement.value=="rect") {
document.getElementById("image").src="image.jsp?month="+month+"&image=rect&update="+updateClicked;
} else if (event.srcElement.value=="pie") {
document.getElementById("image").src="image.jsp?month="+month+"&image=pie&update="+updateClicked;
}
}
//月份改变
function monthChanged() {
var month = document.getElementById("monthOption").value;
getData(month);
}
//修改数据
function updateData() {
var month;
var data = new Array(5);
month=document.getElementById("monthOption").value;
data[0]=document.getElementById("javaText").value;
data[1]=document.getElementById("netText").value;
data[2]=document.getElementById("cText").value;
data[3]=document.getElementById("pbText").value;
data[4]=document.getElementById("pascalText").value;
updateClicked = Math.round(Math.random()*100);
DataExchange.updateData(data,month,updateCallback);
}
function updateCallback(data) {
if (data) {
alert("修改成功");
var month=document.getElementById("monthOption").value;
if (document.getElementsByName("radio")[0].checked) {
checkedRadio="line"
} else if (document.getElementsByName("radio")[1].checked) {
checkedRadio="rect"
} else if (document.getElementsByName("radio")[2].checked) {
checkedRadio="pie"
}
document.getElementById("image").src="image.jsp?month="+month+"&image="+checkedRadio+"&update="+updateClicked;
} else {
alert("修改失败");
}
}
</script>
</head>
<body onload="getData(1)">
<div align="center">
<h1><font color="red">2007年上半年计算机类图书销售情况</font></h1>
<table width="800" border="1">
<tr valign="TOP" align="CENTER"><td width="250">
<form method="get" name="monthform" >
<select id="monthOption" onchange="monthChanged()">
<option value="1">一月份</option>
<option value="2">二月份</option>
<option value="3">三月份</option>
<option value="4">四月份</option>
<option value="5">五月份</option>
<option value="6">六月份</option>
</select>
</form>
<table width="250" border="0" height="173">
<tr><td>JAVA</td><td valign="top"><br></td><td><input type="text" id="javaText" ></td></tr>
<tr><td>.NET</td><td valign="top"><br></td><td><input type="text" id="netText" ></td></tr>
<tr><td>C</td><td valign="top"><br></td><td><input type="text" id="cText" ></td></tr>
<tr><td>PB</td><td valign="top"><br></td><td><input type="text" id="pbText"></td></tr>
<tr><td>PASCAL</td><td valign="top"><br></td><td><input type="text" id="pascalText" ></td></tr>
<tr><td align="right" colspan="3"><input type="submit" value="修改" name="button" onclick="updateData()"></td></tr>
</table>
</td>
<td><table border="0" width="550" height="114">
<tr><td height="20" align="center">
<form method="get" name="radioform">
<input type="radio" value="line" name="radio" onclick="radioclicked()" checked>曲线图
<input type="radio" value="rect" name="radio" onclick="radioclicked()">直方图
<input type="radio" value="pie" name="radio" onclick="radioclicked()">饼图<br>
</form></td>
</tr>
<tr><td align="center"><img id="image"/></td></tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -