前言:
如今兄弟们对“table td width”大概比较着重,小伙伴们都想要学习一些“table td width”的相关内容。那么小编在网上网罗了一些关于“table td width””的相关内容,希望朋友们能喜欢,同学们一起来了解一下吧!index.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax实现无刷新的彩色验证码</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/check.js"></script> <script language="javascript" src="js/ajaxRequest.js"></script> <script language="javascript"> function onerror(){ alert("您的操作有误!"); } //生成并显示验证码 function getCheckCodeFun(showCheckCode,checkCode){ showCheckCode.style.display=''; if(document.getElementById("resultMessage").innerHTML=="温馨提示:单击验证码输入框,获取验证码!验证码区分大小写"){ getCheckCode1(showCheckCode,checkCode); //生成验证码 } checkCode.focus(); } //生成验证码 function getCheckCode1(showCheckCode,checkCode){ let loader1=new net.AjaxRequest("getPictureCheckCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET"); showCheckCode.style.display=''; checkCode.focus(); } function deal_getCheckCode(){ document.getElementById("showCheckCode").innerHTML=this.req.responseText; } //隐藏验证码显示框 function showCheckCodeClear(){ showCheckCode.style.display='none'; } /***********验证验证码是否正确*******************************/ function checkCheckCode(inCheckCode){ if(inCheckCode!=""){ let loader= new net.AjaxRequest("checkCheckCode.jsp?inCheckCode="+inCheckCode+"&nocache="+new Date().getTime(),deal_checkCheckCode,onerror,"GET"); } } function deal_checkCheckCode(){ let h=this.req.responseText; //去除字符串中的Unicode空白符 h=h.replace(/\s/g,""); if(h==1){ document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]); document.getElementById("resultMessage").appendChild(document.createTextNode(" ")); document.getElementById("messageImg").src="images/dui2.gif"; document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]); document.getElementById("resultMessage").appendChild(document.createTextNode("恭喜您,验证码正确!")); document.getElementById("btn_Submit").disabled=false; } else{ document.getElementById("messageImg").src="images/cuo2.gif"; document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]); document.getElementById("resultMessage").appendChild(document.createTextNode("您输入的验证码不正确!")); } } </script></head><body onblur="showCheckCodeClear()"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="22" background="images/bg_left.gif"> </td> <td width="760"> <table width="760" height="646" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td height="126" align="center"> <%@include file="top.jsp"%> </td> </tr> <tr> <td height="446" valign="top"> <table width="100%" height="164" border="0" cellpadding="0" cellspacing="0" class="tableBorder_LRB"> <tr> <td height="49" colspan="6" background="images/reply_navigate.gif"> </td> </tr> <tr> <td width="5%" height="143" onClick="showCheckCodeClear()"> </td> <td colspan="4" align="center" valign="top"> <form name="form1" method="post" action=""> <table width="100%" height="383" border="0" cellpadding="0" cellspacing="0"> <tr onClick="showCheckCodeClear()"> <td width="14%" height="36" align="center">留言人:</td> <td colspan="3"> <input name="author" type="text" id="author" size="30" value=""> * </td> </tr> <tr onClick="showCheckCodeClear()"> <td height="107" align="center">表 情:</td> <td colspan="3"> <input name="face" type=radio class="noborder" value=0 checked> <img height=20 src="images/face/face0.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=1> <img height=19 src="images/face/face1.gif" width=19 align=middle border=0> <INPUT name="face" type=radio class="noborder" value=2> <img height=20 src="images/face/face2.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=3> <img height=20 src="images/face/face3.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=4> <img height=20 src="images/face/face4.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=5> <img height=20 src="images/face/face5.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=6> <img height=20 src="images/face/face6.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=7> <img height=20 src="images/face/face7.gif" width=20 align=middle border=0><br> <input name="face" type=radio class="noborder" value=8> <img height=20 src="images/face/face8.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=9> <img height=20 src="images/face/face9.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=10> <img height=20 src="images/face/face10.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=11> <img height=20 src="images/face/face11.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=12> <img height=20 src="images/face/face12.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=13> <img height=20 src="images/face/face13.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=14> <img height=20 src="images/face/face14.gif" width=20 align=middle border=0> <input name="face" type=radio class="noborder" value=15> <img height=20 src="images/face/face15.gif" width=20 align=middle border=0><br> </td> </tr> <tr onClick="showCheckCodeClear()"> <td height="38" align="center">Email:</td> <td colspan="3"><input name="email" type="text" id="email" size="72"></td> </tr> <tr onClick="showCheckCodeClear()"> <td height="160" align="center">留言内容:</td> <td colspan="3"> <textarea name="content" cols="70" rows="10" class="wenbenkuang" id="content"> </textarea> *</td> </tr> <tr> <td height="42" align="center" valign="bottom" onClick="showCheckCodeClear()">验证码:</td> <td width="6%"> <div style="position:absolute"> <div id="showCheckCode" style="display:none; padding:3px" align="center" > <img src="images/checkCodePicture.jpg" id="createCheckCode" width="200" height="60"> <a href="#" style="color:#000000" onClick="getCheckCode1(showCheckCode,checkCode)">看不清?换一个</a> </div> <input name="checkCode" type="text" id="checkCode" size="6" value="" title="单击验证码输入框,获取验证码" onClick="getCheckCodeFun(showCheckCode,checkCode);" onBlur="checkCheckCode(this.value)"> </div> </td> <td width="6%" valign="bottom" id="resultCheckCode1" onClick="showCheckCodeClear()"> <img id="messageImg" src='images/tishi2.gif' width='16' height='16'> </td> <td width="74%" valign="bottom" id="resultCheckCode2" onClick="showCheckCodeClear()"> <div id="resultMessage">温馨提示:单击验证码输入框,获取验证码!验证码区分大小写</div> </td> </tr> <tr onClick="showCheckCodeClear()"> <td height="42" align="center"> </td> <td colspan="3" > <input name="btn_Submit" id="btn_Submit" type="button" class="btn_grey" value="保存" onClick="check(form1)" disabled="disabled"> <input name="Submit2" type="reset" class="btn_grey" value="重置"> </td> </tr> </table> </form> </td> <td width="6%" onClick="showCheckCodeClear()"> </td> </tr> </table> </td> </tr> <tr> <td align="center" class="tableBorder_LR"> <%@include file="copyright.jsp"%> </td> </tr> </table> <td width="19" background="images/bg_right.gif"> </td> </tr></table></body></html>
checkCheckCode.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><% String inCheckCode=request.getParameter("inCheckCode"); if(session.getAttribute("randCheckCode").equals(inCheckCode)){ out.println("1"); } else{ out.println("0"); }%>
copyright.jsp
<table width="99%" height="72" border="0" align="center" cellpadding="-2" cellspacing="-2"> <tr> <td height="2" colspan="4"></td> </tr> <tr> <td width="124" height="23"> </td> <td valign="bottom" align="center"> CopyRight ©</td> <td width="141"> </td> </tr> <tr> <td height="28"> </td> <td align="center"></td> <td> </td> </tr> <tr> <td height="8"></td> <td height="8"></td> <td height="8"></td> </tr></table>
getPictureCheckCode.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.Random" %><%Random random = new Random();%><img src="<% out.println("PictureCheckCode?rand="+random.nextInt(10000));%>" id="createCheckCode" width="200" height="60"><a href="#" style="color:#EEEEEE" onclick="getCheckCode1(showCheckCode,checkCode)">看不清?换一个</a>
top.jsp
<table width="761" height="126" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="761" align="left" valign="top"> <img src="images/bg_top.gif" width="761" height="126" /> </td> </tr></table>
style.css
body{ font-size: 9pt; margin-left:0px; margin-top:0px; background-image: url(../images/bg.gif); scrollbar-face-color: #5ac3f5; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #fcfcfc; color: #000000; scrollbar-3dlight-color: #ececec; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ececec; scrollbar-darkshadow-color: #999966; background-color: #fcfcfc}td { font-size: 9pt; line-height:150%;}a:hover { font-size: 9pt; color: #FF4400;}a { font-size: 9pt; text-decoration: none; color: #3C404D;}.btn_grey { font-family: "宋体"; font-size: 9pt; color: #333333; background-color: #eeeeee; cursor: hand; padding:1px; height:19px; border-top: 1px solid #FFFFFF; border-right:1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #FFFFFF;}.word_grey { font-size: 9pt; color: #333333;}.txt_grey { font-family: "宋体"; font-size: 9pt; color: #333333; border: 1px solid #999999; width:110px;}input { font-family: "宋体"; font-size: 9pt; color: #333333; border: 1px solid #999999;}.wenbenkuang { font-family: "宋体"; font-size: 9pt; color: #333333; border: 1px solid #999999;}.search { font-family: 宋体; font-size: 9pt; color: #000000; background-color: #EEEEEE; border: 1px Hidden #000000;}.tableBorder { border: #39B4E2 1px solid}.tableBorder_LRB { border: #39B4E2 1px solid; border-top-style:none;}.tableBorder_LR { border: #39B4E2 1px solid; border-top-style:none; border-bottom-style:none;}.tableBorder_Top{ border:1px solid #39B4E2; border-bottom-style:none; border-left-style:none; border-right-style:none}.tableBorder_Botton{ border:1px solid #39B4E2; border-top-style:none; border-left-style:none; border-right-style:none}hr{ color:#39B4E2;}.ToolTip { border-right: #39b4e2 1px solid; border-top: #39b4e2 1px solid; border-left: #39b4e2 1px solid; color: #333333; border-bottom: #39b4e2 1px solid; background-color: #f9f9f9;}.noborder{ border-style:none;}.tableBorder_B{ border:1px solid #39B4E2; border-left-style:none; border-right-style:none; border-Top-style:none;}
ajaxRequest.js
let net=new Object();//编写构造函数net.AjaxRequest=function(url,onload,onerror,method,params){ this.req=null; this.onload=onload; this.onerror=(onerror) ? onerror : this.defaultError; this.loadDate(url,method,params);}//编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法net.AjaxRequest.prototype.loadDate=function(url,method,params){ if (!method){ method="GET"; } if (window.XMLHttpRequest){ this.req=new XMLHttpRequest(); } else if (window.ActiveXObject){ this.req=new ActiveXObject("Microsoft.XMLHTTP"); } if (this.req){ try{ let loader=this; this.req.onreadystatechange=function(){ net.AjaxRequest.onReadyState.call(loader); } this.req.open(method,url,true); if(method=="POST"){ this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } this.req.send(params); } catch (err){ this.onerror.call(this); } }}//重构回调函数net.AjaxRequest.onReadyState=function(){ let req = this.req; let ready = req.readyState; if (ready==4){ if (req.status==200 ){ this.onload.call(this); } else{ this.onerror.call(this); } }}//重构默认的错误处理函籹net.AjaxRequest.prototype.defaultError=function(){ alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态: "+this.req.status);}
check.js
//判断用户的输入是否合法function check(myform){ if(myform.author.value==""){ alert("留言人不允许为空!"); myform.author.focus(); return; } if (myform.email.value!=""){ var i=myform.email.value.indexOf("@"); var j=myform.email.value.indexOf("."); if((i<0)||(i-j>0)||(j<0)){ alert("您输入的Email地址不正确,请重新输入!"); myform.email.value=""; myform.email.focus(); return; } } if(myform.content.value==""){ alert("留言内容不允许为空!"); myform.content.focus(); return; } if(myform.checkCode.value==""){ alert("验证码不允许为空!"); myform.checkCode.focus(); return; } alert("留言提交成功!"); myform.submit();}
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "; ><web-app> <display-name>verificationCodeDemo2</display-name> <servlet> <servlet-name>PictureCheckCode</servlet-name> <servlet-class>com.demo.PictureCheckCode</servlet-class> </servlet> <servlet-mapping> <servlet-name>PictureCheckCode</servlet-name> <url-pattern>/PictureCheckCode</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
PictureCheckCode
package com.demo;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.geom.AffineTransform;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;public class PictureCheckCode extends HttpServlet { public PictureCheckCode() { super(); } public void destroy() { super.destroy(); } public void init() throws ServletException { super.init(); } public Color getRandColor(int s, int e) { Random random = new Random(); if (s > 255) s = 255; if (e > 255) e = 255; int r = s + random.nextInt(e - s); int g = s + random.nextInt(e - s); int b = s + random.nextInt(e - s); return new Color(r, g, b); } public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //禁止缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "No-cache"); response.setDateHeader("Expires", 0); // 指定生成的响应是图片 response.setContentType("image/jpeg"); int width = 200; int height = 60; //创建BufferedImage类的对象 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); //创建Graphics类的对象 Graphics g = image.getGraphics(); //通过Graphics类的对象创建一个Graphics2D类的对象 Graphics2D g2d=(Graphics2D)g; //实例化一个Random对象 Random random = new Random(); //通过Font构造字体 Font mFont = new Font("华文宋体", Font.BOLD, 30); //改变图形的当前颜色为随机生成的颜色 g.setColor(getRandColor(200, 250)); //绘制一个填色矩形 g.fillRect(0, 0, width , height); //画一条折线 //创建一个供画笔选择线条粗细的对象 BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL); //改变线条的粗细 g2d.setStroke(bs); //设置当前颜色为预定义颜色中的深灰色 g.setColor(Color.DARK_GRAY); int[] xPoints=new int[3]; int[] yPoints=new int[3]; for(int j=0;j<3;j++){ xPoints[j]=random.nextInt(width - 1); yPoints[j]=random.nextInt(height - 1); } g.drawPolyline(xPoints, yPoints,3); //生成并输出随机的验证文字 g.setFont(mFont); String sRand=""; int itmp=0; for(int i=0;i<4;i++){ if(random.nextInt(2)==1){ //生成A~Z的字母 itmp=random.nextInt(26)+65; } else{ //生成0~9的数字 itmp=random.nextInt(10)+48; } char ctmp=(char)itmp; sRand+=String.valueOf(ctmp); Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)); g.setColor(color); /****随机缩放文字并将文字旋转指定角度**/ //将文字旋转指定角度 Graphics2D g2d_word=(Graphics2D)g; AffineTransform trans=new AffineTransform(); trans.rotate(random.nextInt(45)*3.14/180,15*i+10,7); //缩放文字 float scaleSize=random.nextFloat()+0.8f; if(scaleSize>1.1f) scaleSize=1f; trans.scale(scaleSize, scaleSize); g2d_word.setTransform(trans); g.drawString(String.valueOf(ctmp),30*i+40,16); } //将生成的验证码保存到Session中 HttpSession session=request.getSession(true); session.setAttribute("randCheckCode",sRand); g.dispose(); ImageIO.write(image,"JPEG",response.getOutputStream()); }}
需要servlet和jsp的jar包
工程目录:
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #table td width