班服的图片展示和投票的实现

班级想要定制班服，但班服的图案需要全班同学的投票决定，所以，可以利用机房，使用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>

使用表格显示，采用动态生成表格。

效果为：

posted @ 2012-05-16 10:50 Java EE 阅读(412) 评论(0) 收藏举报

刷新页面返回顶部

Java EE

班服的图片展示和投票的实现

公告