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

最新推荐文章于 2024-07-19 17:37:28 发布

weixin_30736301

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量175

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/JPAORM/archive/2012/05/16/2510252.html

版权

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

weixin_30736301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
班服的图片展示和投票的实现

班级想要定制班服，但班服的图案需要全班同学的投票决定，所以，可以利用机房，使用tomcat，大家访问同一台机器，观看图片和投票。先看一下，班服的图片展示和投票页面的代码吧：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> &lt...
复制链接

扫一扫