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

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

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

效果为:


转载于:https://www.cnblogs.com/JPAORM/archive/2012/05/16/2510252.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值