班级通过机房使用Tomcat服务器，让全体同学在线投票选择班服图案，并实时展示投票结果。
班级想要定制班服，但班服的图案需要全班同学的投票决定，所以，可以利用机房，使用tomcat，大家访问同一台机器，观看图片和投票。
先看一下，班服的图片展示和投票页面的代码吧：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>banfu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./banfu.css">
<script language="javascript">
var checkSubmitFlg = false;
function checkSubmit() {
if (checkSubmitFlg == true) {
return false;
}
checkSubmitFlg = true;
return true;
}
document.ondblclick = function docondblclick() {
window.event.returnValue = false;
}
document.onclick = function doconclick() {
if (checkSubmitFlg) {
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<div class="div">
<span style="text-align: center; display:block; line-height: 80px; color: red; fontfont-family: '华文新魏';
font-size: 30px;" > 计103-1班服图片介绍</span>
<form action="/banfu/servlet/Count" method="post">
<ul class="faceul">
<li><a href="14.html"><img src="img/mengzhu8.jpg"/></a><br/><font>1、单梦竹供图</font></li><input type="checkbox" name="count" value="1"/>
<li><a href="15.html"><img src="img/mengzhu9.jpg"/></a><br/><font>2、单梦竹供图</font></li><input type="checkbox" name="count" value="2"/>
<li><a href="16.html"><img src="img/mengzhu10.jpg"/></a><br/><font>3、单梦竹供图</font></li><input type="checkbox" name="count" value="3"/>
<li><a href="17.html"><img src="img/mengzhu11.jpg"/></a><br/><font>4、单梦竹供图</font></li><input type="checkbox" name="count" value="4"/>
<li><a href="18.html"><img src="img/qiaoyue1.jpg"/></a><br/><font>5、刘巧月供图</font></li><input type="checkbox" name="count" value="5"/>
<li><a href="19.html"><img src="img/qiaoyue2.jpg"/></a><br/><font>6、刘巧月供图</font></li><input type="checkbox" name="count" value="6"/>
<li><a href="20.html"><img src="img/qiaoyue3.jpg"/></a><br/><font>7、刘巧月供图</font></li><input type="checkbox" name="count" value="7"/>
<li><a href="21.html"><img src="img/yanwu1.jpg"/></a><br/><font>8、陈延武供图</font></li><input type="checkbox" name="count" value="8"/>
<li><a href="22.html"><img src="img/yanwu2.jpg"/></a><br/><font>9、陈延武供图</font></li><input type="checkbox" name="count" value="9"/>
</ul>
<ul class="faceul">
<li><a href="8.html"><img src="img/yajie1.jpg"/></a><br/><font>10、尤亚杰供图</font></li><input type="checkbox" name="count" value="10"/>
<li><a href="9.html"><img src="img/yajie2.jpg"/></a><br/><font>11、尤亚杰供图</font></li><input type="checkbox" name="count" value="11"/>
<li><a href="10.html"><img src="img/yajie3.jpg"/></a><br/><font>12、尤亚杰供图</font></li><input type="checkbox" name="count" value="12"/>
<li><a href="11.html"><img src="img/yajie4.jpg"/></a><br/><font>13、尤亚杰供图</font></li><input type="checkbox" name="count" value="13"/>
<li><a href="12.html"><img src="img/yajie5.jpg"/></a><br/><font>14、尤亚杰供图</font></li><input type="checkbox" name="count" value="14"/>
<li><a href="13.html"><img src="img/yajie6.jpg"/></a><br/><font>15、尤亚杰供图</font></li><input type="checkbox" name="count" value="15"/>
</ul>
<ul class="faceul">
<li><a href="1.html"><img src="img/mengzhu.jpg"/></a><br/><font>16、单梦竹供图</font></li><input type="checkbox" name="count" value="16"/>
<li><a href="2.html"><img src="img/mengzhu1.jpg"/></a><br/><font>17、单梦竹供图</font></li><input type="checkbox" name="count" value="17"/>
<li><a href="3.html"><img src="img/mengzhu3.jpg"/></a><br/><font>18、单梦竹供图</font></li><input type="checkbox" name="count" value="18"/>
<li><a href="4.html"><img src="img/mengzhu5.jpg"/></a><br/><font>19、单梦竹供图</font></li><input type="checkbox" name="count" value="19"/>
<li><a href="5.html"><img src="img/mengzhu6.jpg"/></a><br/><font>20、单梦竹供图</font></li><input type="checkbox" name="count" value="20"/>
<li><a href="6.html"><img src="img/shangdi1.jpg"/></a><br/><font>21、商迪供图</font></li><input type="checkbox" name="count" value="21"/>
<li><a href="7.html"><img src="img/shangdi2.jpg"/></a><br/><font>22、商迪供图</font></li><input type="checkbox" name="count" value="22"/>
<br/><input type="submit" value="提交"/>
<a href="/banfu/servlet/Show" style="background-color: red;">查看票数</a>
</ul>
</form>
</div>
</body>
<!----2012-5-10 尤亚杰 --->
</html>
配合的css代码为：
@CHARSET "UTF-8";
body {
margin: 0 auto;
width: 900px;
height: 800px;
background-image: url('img/1.jpg');
}
/*.span{
font-size: 30px;
font-family: "华文新魏";
color: red;
}*/
.faceul {
margin-left:300px;
width: 900px;
height: 430px;
}
.faceul li {
width: 215px;
height: 210px;
float: left;
margin-left: 10px;
list-style-type: none;
}
.faceul img {
width: 217px;
height: 160px;
}
.faceul font {
font-size: 20px;
margin-left: 5px;
color: yellow;
}
它的显示效果为：
下面是投票计数的代码：
package com.you.banfu;
public class Num {
private static int[] count = new int[23];
private static Num num = new Num();
private Num(){}
public static Num getInstance(){
return num;
}
public int[] getCount(){
return count;
}
public synchronized void set(String[] num) {
for(int i = 0; i < num.length; i++) {
switch(Integer.parseInt(num[i])) {
case 1: count[1]++;break;
case 2: count[2]++;break;
case 3: count[3]++;break;
case 4: count[4]++;break;
case 5: count[5]++;break;
case 6: count[6]++;break;
case 7: count[7]++;break;
case 8: count[8]++;break;
case 9: count[9]++;break;
case 10:count[10]++;break;
case 11: count[11]++;break;
case 12: count[12]++;break;
case 13: count[13]++;break;
case 14: count[14]++;break;
case 15: count[15]++;break;
case 16: count[16]++;break;
case 17: count[17]++;break;
case 18: count[18]++;break;
case 19: count[19]++;break;
case 20: count[20]++;break;
case 21: count[21]++;break;
case 22: count[22]++;break;
}
}
}
}
使用单例模式实现计数。
下面代码实现避免重复提交的情况：
package com.you.banfu;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashSet;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Count extends HttpServlet {
private static final long serialVersionUID = 1L;
String[] num;
String ip;
Set<String> hash = new HashSet<String>();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost( request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Num n_count = Num.getInstance();
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
num = request.getParameterValues("count");
if(hash.add(getRemoteAddress(request))== true){
n_count.set(num);
request.setAttribute("count", n_count.getCount());
request.getRequestDispatcher("/show.jsp").forward(request, response);
}
else{
PrintWriter out = response.getWriter();
out.write("<script type='text/javascript'>");
out.write("window.alert(");
out.write("\"请不要重复提交！\"");
out.write(");window.history.go(-1);</script>");
}
}
public String getRemoteAddress(HttpServletRequest request) {
String ip = request.getHeader("x-forwarded-for");
if (ip == null || ip.length() == 0 || ip.equalsIgnoreCase("unknown")) {
ip = request.getHeader("Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || ip.equalsIgnoreCase("unknown")) {
ip = request.getHeader("WL-Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || ip.equalsIgnoreCase("unknown")) {
ip = request.getRemoteAddr();
}
return ip;
}
}
因为在机房中，所以设定一个ip只能提交一次，便实现了避免重复提交。
到显示页面的servlet代码为：
package com.you.banfu;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Show extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Num n_count = Num.getInstance();
request.setAttribute("count", n_count.getCount());
request.getRequestDispatcher("/show.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
显示页面的代码为：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'show.jsp' starting page</title>
</head>
<body>
<table border="1px">
<tr>
<td>图片编号</td> <td>投票数</td>
</tr>
<s:forEach var="num" items="${count}" varStatus="st" begin="1">
<tr>
<td>${st.count}</td> <td>${num}</td>
</tr>
</s:forEach>
</table>
</body>
</html>
使用表格显示，采用动态生成表格。
效果为：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
